我试图让多个 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
属性而不是它的高度
。按照上面的 jsfiddle 链接查看示例。
关于html - 内联/内联 block 元素的 CSS 垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34729754/