css 属性 vertical-align: middle
在此示例中不起作用。
HTML:
<div>
<span class='twoline'>Two line text</span>
<span class='float'> Float right </span>
</div>
CSS:
.float {
float: right;
}
.twoline {
width: 50px;
display: inline-block;
}
div {
border: solid 1px blue;
vertical-align: middle;
}
右侧 float 的 span
相对于包含它的 div
没有垂直居中。我怎样才能让它垂直居中?
以上代码在this fiddle中.
最佳答案
您必须使用 display
将您的元素包装在 table-cell
中,在 table
中。
像这样:
<div>
<span class='twoline'>Two line text</span>
<span class='float'>Float right</span>
</div>
和
.float {
display: table-cell;
vertical-align: middle;
text-align: right;
}
.twoline {
width: 50px;
display: table-cell;
}
div {
display: table;
border: solid 1px blue;
width: 500px;
height: 100px;
}
关于html - 垂直对齐 : middle doesn't work,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7967217/