我正在尝试让几个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;
}
结果:
发布于 2012-03-13 00:03:53
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
。
发布于 2012-03-13 00:04:13
发布于 2012-03-13 00:04:17
只需将两个元素向左浮动即可得到相同的结果。
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;
}
https://stackoverflow.com/questions/9670469
复制相似问题