Html 内联/内联块元素的CSS垂直对齐

我试图让几个

内联

和

内联块

组件在

div

中垂直对齐。为什么本例中的

span

坚持要向下推？我尝试了两种方法：垂直对齐：中间和

垂直对齐：顶部，但没有任何更改

HTML:

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>​

a {
    background-color:#FFF;
    width:20px;
    height:20px;
    display:inline-block;
    border:solid black 1px;
}

div {
    background:yellow;
    vertical-align:middle;
}
span {
    background:red;
}

​
结果：


垂直对齐
适用于正在对齐的图元，而不是其父图元。要垂直对齐div的子对象，请执行以下操作：

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>​

a {
    background-color:#FFF;
    width:20px;
    height:20px;
    display:inline-block;
    border:solid black 1px;
}

div {
    background:yellow;
    vertical-align:middle;
}
span {
    background:red;
}

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

见：

注意：
垂直对齐
是相对于当前文本行的，而不是相对于父级
div
的全高。如果希望父级
div
更高，并且元素仍然垂直居中，请设置
div
的
行高
属性，而不是其
高度
。以上面的JSIDLE链接为例。
给出
垂直对齐：顶部在
a
和
span
中。像这样：

a, span{
 vertical-align:top;
}

选中此项
只需向左浮动两个元素即可获得相同的结果

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

要微调
内联块
项的位置，请使用顶部和左侧：

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

谢谢
 将它们向左浮动的问题是，当浏览器变得太小时，它们将换行到下一行。有时，即使超出浏览器边界，您也需要项目保持内联，因此，
inline block
是唯一的解决方案。虽然包装问题可能存在，但我认为这对于包装还可以的情况是一个非常好的解决方案。它很优雅，体现了所需效果的精神，并且不需要修改父元素。如果您指定外部
div
@AbhranilDas
垂直对齐的高度相对于当前文本行，而不是父元素，则此操作将停止。要使此功能正常工作，请设置div的
行高度
，而不是其
高度
。请注意，如果也可以设置
，则不会发生这种情况。