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

结果:
enter image description here

FIDDLE

191967 次浏览
小开
最佳答案

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链接获得示例。

小开

在 a和 span中加入 vertical-align:top;，像这样:

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-技巧！


提交答案