html - 内联/内联 block 元素的 CSS 垂直对齐

Question

我试图让多个 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;
}

结果:

FIDDLE

Answer 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 属性而不是它的高度。按照上面的 jsfiddle 链接查看示例。