Выравнивание изображения с текстом

Question

Я пытаюсь выровнять изображение с текстом справа. Я также хотел, чтобы изображение выравнивалось по вертикали с текстом. Но когда я начинаю писать текст, он идет под изображением. Любые идеи как решить это?

<div style="float: left; vertical-align: middle"> 
<img alt="" src="/portals/85/Images/AukraMaritime.gif" class="Images" /> 
</div> 
<div style="float: left;"> 
<a href="http:\\www.aukramaritime.no&quot;" class="LinksMenu LeftMenu HoverLinkH1">Aukra Maritime</a> 
<br /> 
<br /> 
<span>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. </span><br /> 
<br /> 
<a href="http:\\www.aukramaritime.no" class="LinksMenu LeftMenu HoverLink">www.aukramaritime.no</a> 
</div> 

Answer 1

float:left Удалить из второго div.

Обратите внимание, как текст начнется рядом с изображением, а затем будет плавать под. Чтобы предотвратить это, добавьте overflow:hidden в текстовый div или задайте фиксированную ширину и поместите его влево.

См. http://jsfiddle.net/D7gGp/3/.

Чтобы выровнять по вертикали, приложите как изображение, так и текст в div, абсолютное положение изображения, установите верх: 50% вместе с верхним краем :-(halfImageHeight) px и нажмите текст вправо, чтобы дайте пространство для изображения. См. http://jsfiddle.net/D7gGp/6/.

Answer 2

Вы должны плавать изображение слева:

CSS

.Images { float:left; } 

Answer 3

вы также можете использовать запас для регулировки текст

.classname { 
      margin-top: 15px; 
} 

or 

.classname{ 

      margin : 1px 1px 1px 1px; (please change as per your requirement) 
        /*(BOTTOM, LEFT, RIGHT, TOP)*/ 
}