垂直居中浮动div的内容

Question

我如何对浮动div(我不知道的高度)的内容进行真正的中心化？

有非常简单的HTML和CSS(见这个小提琴:http://jsfiddle.net/DeH6E/1/)

<div class="floating">
    This should be in the middle
</div>
?
.floating {
    height: 100px;
    float: left;
    border: 1px solid red;
    vertical-align: middle;
}   ?

如何使句子"这应该在中间"真的出现在中间(垂直居中)？vertical-align: middle似乎不起作用.我试过了display: table-cell,也没用.解决这个问题的最佳方法是什么？我想避免插入任何其他HTML标记,只需通过CSS.

(只是说清楚:我不知道容器的实际高度,100px仅用于示例)

编辑:我希望你了解我,所以......总是当我设计网页时,我遵循HTML保存内容的规则,CSS负责视觉风格.我从来没有将它们混合在一起或只使用一个来启用另一个.在这种情况下,我也想坚持这条规则.我不想只为CSS插入HTML元素.

Answer 1

其他是正确的,您需要嵌套两个DOM元素,这为您提供了更多控制居中的选项.这是代码:

.floating {
  display: table;
  float: right;
  height: 200px;
  width: 400px;
  border: 1px solid red;
}
.floating p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center;
}

<div class="floating">
    <p>This is the proper way that validates and breaks across multiple
    lines, if the text is longer than just a few words and still
    should be vertically centered. Here, it's also horizontally
    centered for added joy.</p>
</div>

Answer 2

在文本中添加文本<p>.

HTML

<div class="floating">
    <p>This should be in the middle</p>
</div>

CSS

.floating {
    height: 100px;
    border: 1px solid #f00;
    display: table-cell;
    vertical-align: middle;
}
?

Answer 3

如果你知道高度,那么

line-height:100px;

如果没有,请在渲染后使用javascript设置行高.

http://jsfiddle.net/DeH6E/4/