CSS 垂直居中浮动div的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12168145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically center content of floating div
提问by Pavel S.
How do I verically center the content of floating div (which height I don't know)?
如何将浮动 div 的内容真正居中（我不知道哪个高度）？
There is very simple HTML and CSS (see this fiddle: http://jsfiddle.net/DeH6E/1/)
有非常简单的 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;
} ?
How do I make the sentence "This should be in the middle" appear really in the middle (vertically centered)? vertical-align: middledoes not seem to work. I have tried display: table-celland 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.
如何使句子“这应该在中间”真正出现在中间（垂直居中）？vertical-align: middle似乎不起作用。我试过了display: table-cell，也没用。解决此问题的最佳方法是什么？我想避免插入任何其他 HTML 标签，只需通过 CSS 即可。
(Just to make it clear: I don't know the actual height of the container, 100px is just for the example)
（只是说清楚：我不知道容器的实际高度，100px 仅用于示例）
EDIT: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.
编辑：我希望你能理解我，所以......在我设计网页时，我总是遵循 HTML 保存内容和 CSS 负责视觉样式的规则。我从不将它们混合在一起或使用一个来启用另一个。在这种情况下，我也想坚持这个规则。我不想仅为 CSS 插入 HTML 元素。
采纳答案by Systembolaget
The others are right, you need to nest two DOM elementswhich gives you more options controlling the centering. Here's the code:
其他人是对的，您需要嵌套两个 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>回答by Henrik Ammer
Add the text inside a <p>.
在 a 中添加文本<p>。
HTML
HTML
<div class="floating">
<p>This should be in the middle</p>
</div>
CSS
CSS
.floating {
height: 100px;
border: 1px solid #f00;
display: table-cell;
vertical-align: middle;
}
?
回答by maxisam
If you know the height, then
如果你知道身高，那么
line-height:100px;
If not, use javascript to set line-height after rendering.
如果没有，请在渲染后使用 javascript 设置行高。
回答by Spongman
I was also looking for a solution to this and eventually came up with this:
我也在寻找解决方案，最终想出了这个：
http://jsfiddle.net/w6j9mgjp/1/
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;
}
it only works for a single line of text, though.
不过，它仅适用于单行文本。
回答by dsaket
Just play with the pseudo selector.
只需使用伪选择器即可。
.floating {
height: 100px;
float: left;
border: 1px solid red;
}
.floating::before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
回答by PhazingAzrael
the text inside of your div needs to be in its own div tag, and that div tag needs to be set to display:table-cell; and vertical-align:middle; while your .floating div needs to be set as display:table;
div 中的文本需要在它自己的 div 标签中，并且该 div 标签需要设置为 display:table-cell；和垂直对齐：中间；而您的 .floating div 需要设置为 display:table;
or you can set a p tag or some other sort of formatting tag in there to contain your text, eg span, or p
或者您可以在其中设置 ap 标签或其他某种格式标签来包含您的文本，例如 span 或 p
