Как вертикально выравнивать элементы внутри div

Question

Я новичок в формате HTML/CSS, и вертикальное выравнивание элементов в боковом div приводит меня в бешенство. В принципе, у меня есть div, которые содержат смесь текста и изображений, и все, что я хотел сделать, это вертикальное выравнивание элементов в середине ediv.

В соответствии с this post:

Встроенные элементы (и только встроенные элементы) могут быть выровнены по вертикали в их контексте с помощью вертикального выравнивания: посередине. . Тем не менее, «контекст» не вся высота родительского контейнера, то высота текста линии они в

Итак, я создаю SPAN и событие установить diplay: inline, но ничего не работает:

<div id="main_section" class="main_align" > 
    <span class="inline"> 
     <span class="inline"><img src="http://placehold.it/50x50" /></span> 
     &nbsp; 
     <span class="small inline">A Very Small Text</span> 
     &nbsp; 
     <span class="medium inline">Medium String</span> 
    </span> 
</div> 

Адрес jsfiddle.

Любые указатели будут оценены.

Примечание: Я счастлив, если это работает в Chrome и Firefox. Нет необходимости решать специфические проблемы IE.

Answer 1

Если вы хотите выровнять тексты разных размеров по вертикали (кроме их базовой линии), чем следующая скрипку является возможным решением, используя inline-block: http://jsfiddle.net/vGKjj/13/

HTML:

<div id="main_section" class="main_align" > 
    <span> 
     <span class="vam"><img src="http://placehold.it/50x50" /></span> 
     &nbsp; 
     <span class="small vam">A Very Small Text</span> 
     &nbsp; 
     <span class="medium vam">Medium String</span> 
    </span> 
</div> 

CSS:

.vam { 
    vertical-align: middle; 
} 
span.vam { 
    display: inline-block; 
} 
.vam img { 
    vertical-align: top; /* removes a white gap below image */ 
} 

Answer 2

Ваша проблема может быть решена путем добавления следующего кода

.inline img{ 
    vertical-align:middle; 
} 

Просто другая нота
Также трюк, который хорошо работает, если у вас есть фиксированную высоту, сделать высоту строки равной ей.
Например: -

.yourDiv{ 
    height:50px; 
    line-height:50px; 
} 

jsfiddle