垂直对齐：中间不起作用

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;
}

The span浮动在右侧的元素相对于其包含的元素不垂直居中div。我怎样才能让它垂直居中？

上面的代码在这把小提琴 http://jsfiddle.net/e8ESb/1/.

您必须将元素包装在table-cell，在一个table using display.

像这样：

<div>
  <span class='twoline'>Two line text</span>
  <span class='float'>Float right</span>
</div>

and

.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/ http://jsfiddle.net/e8ESb/7/