本文介绍了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不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

1403页,肝出来的..

09-08 18:53