内联/内联块元素的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的{​​{1}}属性而不是line-height。请按照上面的 jsfiddle 链接获取示例。

Answer 2

在vertical-align:top;＆amp;中提供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;
}

Answer 4

要微调inline-block项目的位置，请使用顶部和左侧：

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

感谢CSS-Tricks！