内联/内联块元素的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的子代，请执行以下操作：

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

给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-Tricks！