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

Я пытаюсь получить несколько компонентов inline и inline-block, выровненных по вертикали в 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;
}

РЕЗУЛЬТАТ:
enter image description here

FIDDLE

Ответы

Ответ 1

vertical-align применяется к выравниваемым элементам, а не к их родительскому элементу. Чтобы вертикально выровнять дочерние элементы div, сделайте следующее:

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

Смотрите: http://jsfiddle.net/dfmx123/TFPx8/1186/

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

Ответ 2

Дайте vertical-align:top; в a и span. Вот так:

a, span{
 vertical-align:top;
}

Отметьте http://jsfiddle.net/TFPx8/10/

Ответ 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;
}