内联/内联块元素的CSS垂直alignment

我试图得到几个inline和inline-block组件垂直alignment在一个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; } 

结果：

小提琴

Answer 1

vertical-align适用于正在alignment的元素，而不是它们的父元素。 要垂直alignmentdiv的孩子，请改为：

 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链接为例。

Answer 2

给vertical-align:top; 在＆ 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; }