本文介绍了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; }
如下所示:
这篇关于vertical-align:middle不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!