CSS вертикальное выравнивание элементов inline/inline-block

Question

Я пытаюсь получить несколько компонентов inline и выровненных по вертикали в div. Почему в этом примере span настаивает на том, чтобы быть нажатой? Я пробовал оба vertical-align:middle; и vertical-align:top;, но ничего не меняется.

HTML:

<div> 
    <a></a><a></a> 
    <span>Some text</span> 
</div>​ 

CSS:

a { 
    background-color:#FFF; 
    width:20px; 
    height:20px; 
    display:inline-block; 
    border:solid black 1px; 
} 

div { 
    background:yellow; 
    vertical-align:middle; 
} 
span { 
    background:red; 
} 

РЕЗУЛЬТАТ:

FIDDLE

Answer 1

vertical-align относится к выравниваемым элементам, а не к их родительскому элементу. Для вертикального выравнивания детей в Див, сделайте это вместо:

div > * { 
    vertical-align:middle; // Align children to middle of line 
} 

См: http://jsfiddle.net/dfmx123/TFPx8/1186/

ПРИМЕЧАНИЕ: vertical-align является относительно текущей текстовой строки, а не на всю высоту родителя div. Если вы хотите, чтобы родительский div был выше и все еще имел элементы с вертикальной ориентацией, установите для него line-height, а не его height. Следуйте jsfiddle см. Ссылку выше для примера.

Answer 2

Давать vertical-align:top; в a & span. Как это:

a, span{ 
vertical-align:top; 
} 

Проверить это http://jsfiddle.net/TFPx8/10/

Answer 3

Просто плавающие оба элемента влево достигают тот же результат.

div { 
background:yellow; 
vertical-align:middle; 
margin:10px; 
} 

a { 
background-color:#FFF; 
width:20px; 
height:20px; 
display:inline-block; 
border:solid black 1px; 
float:left; 
} 

span { 
background:red; 
display:inline-block; 
float:left; 
}