内联/内联块元素的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;
}

结果:

小提琴

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's line-height属性而不是它的属性height.按照上面的jsfiddle链接获取示例.

Answer 2

给vertical-align:top;中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项目的位置，请使用 top 和 left：

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

感谢CSS 技巧！