垂直居中浮动div的内容 [英] Vertically center content of floating div

问题描述

如何使浮动div的内容（我不知道的高度）居中？

How do I verically center the content of floating div (which height I don't know)?

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

There is very simple HTML and CSS (see this fiddle: 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。

How do I make the sentence "This should be in the middle" appear really in the middle (vertically centered)? vertical-align: middle does not seem to work. I have tried display: table-cell and it didn't work either. What's the best way to solve this issue? I'd like to avoid inserting any other HTML tags, do it just via CSS.

（只是为了说明：我不知道实际的高度容器，100px只是示例）

(Just to make it clear: I don't know the actual height of the container, 100px is just for the example)

编辑：我想让你了解我，网页，我遵循HTML保存内容的规则，CSS负责视觉风格。我从来不混在一起或使用一个只是为了启用其他。在这种情况下，我也想坚持这条规则。我不想只为CSS插入HTML元素。

I'd like you to understand me, so... Always when I design web page, I follow the rule that HTML holds the content and CSS is responsible for the visual style. I never mix them up together or use one just to enable the other. In this case, I want to stick with this rule too. I don't want to insert HTML element just for the CSS.

推荐答案

其他都是正确的，你需要嵌套两个DOM元素，这给你更多的选项控制中心。

The others are right, you need to nest two DOM elements which gives you more options controlling the centering.

这篇关于垂直居中浮动div的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！