浮动DIV的垂直中心内容(Vertically center content of floating

如何verically中心浮动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负责视觉样式规则。我从来没有将它们混合在一起了，或使用一个刚刚启用其他。在这种情况下，我想这个规则坚持了。我不想插入HTML元素只是为CSS。

Answer 1:

其他人是正确的，你需要嵌套2 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/

Answer 4:

我也一直在寻找一个解决方案，这并最终想出了这个：

http://jsfiddle.net/w6j9mgjp/1/

.floating {
    height: 100px;
    float: left;
    border: 1px solid red;
}

.floating::before {
    content: "a";
    display: block;
    visibility: hidden;
    height: 50%;
    margin-top: -.7em;
}

它仅适用于单个文本行，虽然。

Answer 5:

http://jsfiddle.net/DeH6E/2/

您的div中的文本需要在它自己的div标签，而div标签需要被设置为显示：表细胞; 和垂直对齐：中部; 而你.floating DIV需要设置为显示：表;

或者您可以设置AP标签或一些其他类型的在那里格式化标签包含文本，如跨度，或P的

Answer 6:

只是伪选择播放。

.floating {
    height: 100px;
    float: left;
    border: 1px solid red;
}

.floating::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

文章来源: Vertically center content of floating div