CSS вертикальне вирівнювання вбудованих / вбудованих блокових елементів

Я намагаюся встановити декілька 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;
}

РЕЗУЛЬТАТ:

ПІДМОГА

vertical-alignстосується елементів, що вирівнюються, а не їх батьківського елемента. Щоб вертикально вирівняти діти діва, зробіть це замість цього:

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

Дивіться: http://jsfiddle.net/dfmx123/TFPx8/1186/

ПРИМІТКА : vertical-alignвідносно поточного рядка тексту, а не повної висоти батьківського рівня div. Якщо ви хотіли, щоб батько divбув вище і все ще містив елементи вертикально по центру, встановіть властивість divs line-heightзамість його height. Для прикладу перейдіть за посиланням jsfiddle вище.

Дайте vertical-align:top;в a& span. Подобається це:

a, span{
 vertical-align:top;
}

Перевірте це http://jsfiddle.net/TFPx8/10/

Просто плаваючи обидва елементи ліворуч, досягається однаковий результат.

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;
}

Для тонкої настройки позиції inline-blockпредмета використовуйте верхній і лівий:

  position: relative;
  top: 5px;
  left: 5px;

Спасибі CSS-трюки !