Центрированное изображение и текст влево, нажав изображение

Я хотел бы иметь изображение в центре и иметь текст слева от него. Все, что я пробовал, либо помещает текст под изображением, над изображением, либо подталкивает изображение больше вправо, чем больше я печатаю. Может кто-нибудь мне помочь? Я новичок в html и css.Центрированное изображение и текст влево, нажав изображение

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
h1 { 
 
    text-align: center; 
 
    border: solid; 
 
    background-color: #FF0000; 
 
} 
 
span { 
 
    display: inline-block; 
 
    border: dashed blue; 
 
    color: #ff0000; 
 
    float: left; 
 
} 
 
.mainPicture { 
 
    display: block; 
 
    width: 30%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link type="text/css" rel="stylesheet" href=main.css> 
 
</head> 
 

 
<body> 
 
    <h1>Welcome</h1> 
 
    <div> 
 
    <span> My name is asd asd. I am currently attending </span> 
 
    <img src="onlinePicture.jpg" alt="Picture of Me" class="mainPicture"> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2015-06-03 Goob Goober

Установите ширину на: 40%. это заставит ваш экран выглядеть так: 40% span | 30% img | 40% margin –

Использование CSS позиционирование должно помочь вам.

Установите div как position: relative;, а затем установите изображение position: absolute;. Затем смещайте изображение left: 50%; и сравните ширину изображения, удалив половину его с помощью margin-left: -15%;.

Пример:

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
h1 { 
 
    text-align: center; 
 
    border: solid; 
 
    background-color: #FF0000; 
 
} 
 
div { 
 
    position: relative; 
 
} 
 
span { 
 
    display: inline-block; 
 
    border: dashed blue; 
 
    color: #ff0000; 
 
    float: left; 
 
} 
 
.mainPicture { 
 
    display: block; 
 
    width: 30%; 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -15%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link type="text/css" rel="stylesheet" href=main.css> 
 
</head> 
 

 
<body> 
 
    <h1>Welcome</h1> 
 
    <div> 
 
    <span> My name is asd asd. I am currently attending </span> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Picture of Me" class="mainPicture"> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2015-06-03 16:57:37 Stewartside

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
    border: solid; 
 
    background-color: #FF0000; 
 
} 
 
div { 
 
    /*text-align: center;*/ 
 
    font-size: 0; 
 
    margin: 10px auto; 
 
} 
 
div > span { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    border: 1px dashed blue; 
 
    color: #ff0000; 
 
    font-size: 16px; 
 
    width: 35%; 
 
    text-align: center; 
 
} 
 
div > span:nth-child(2) { 
 
    width: 30%; 
 
    border: none; 
 
} 
 
div > span:nth-child(2) img{  
 
    background: #ccc; 
 
    width: 100%;  
 
}

<h1>Welcome</h1> 
 
<div> 
 
<span> My name is asd asd. I am currently attending</span> 
 
<span><img src="http://mc-fc.net/wp-content/uploads/2012/11/124124124_mcfc.gif" alt="Picture of Me" class="mainPicture" /></span> 
 
</div>

источник

2015-06-03 17:16:31 Dmitriy

Центрированное изображение и текст влево, нажав изображение

ответ

Смежные вопросы