[英]CSS vertical alignment of inline/inline-block elements
我试图让几个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
属性而不是它的height
。 以上面的jsfiddle链接为例。
给vertical-align:top;
在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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.