vertical-align:middle不起作用 [英] vertical-align: middle doesn't work
本文介绍了vertical-align:middle不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
css属性 vertical-align:middle
在此示例中不起作用。
The css property vertical-align: middle
does not work in this example.
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;
}
span
浮动在右边不是相对于其包含 div
垂直居中。如何可以将它垂直居中?
The span
that is floating on the right is not vertically centered with respect to its containing div
. How can I have it vertically centered?
上述代码位于这个小提琴。
推荐答案
您必须将元素包装在 table-cell
a 表使用
显示
。
You must wrap your element in a table-cell
, within a table
using display
.
/ p>
Like this:
<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;
}
如下所示: http://jsfiddle.net/e8ESb/7/
这篇关于vertical-align:middle不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文