Html div 中的中间文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6461890/
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
middle text in a div
提问by Naor
Why is the text in this example: http://jsfiddle.net/7EYZe/not in the vertical center?
为什么这个例子中的文字：http: //jsfiddle.net/7EYZe/不在垂直中心？
How can I middle the text?
如何将文本居中？
EDIT:
Now I have two or more lines of text:
http://jsfiddle.net/7EYZe/12/
编辑：
现在我有两行或更多行文本：http:
//jsfiddle.net/7EYZe/12/
How can I display this properly?
我怎样才能正确显示这个？
回答by Lasse
The following css will center text in a div by using padding instead of height:
以下 css 将使用填充而不是高度将 div 中的文本居中：
.centerText
{
padding: 90px 0;
font-size: 18px;
border:solid 1px #000;
}
回答by Steve Robbins
That's an incorrect use of vertical-align. It doesn't know what object to vertically align itself to.
那是不正确的使用vertical-align。它不知道要垂直对齐到什么对象。
Here is one dynamic, table-less solution: http://jsfiddle.net/imoda/7EYZe/14/
这是一种动态的无表解决方案：http: //jsfiddle.net/imoda/7EYZe/14/
<style type="text/css">
div {
height:200px;
width:200px;
border:solid 1px black;
}
.aligner {
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.align {
display: inline-block;
vertical-align: middle;
}
</style>
<div>
<span class="aligner"></span>
<span class="align">blabla</span>
</div>
回答by riku
Add text-align: center; and display: table-cell; to center it in middle of the box.
添加文本对齐：居中；并显示：表格单元格；将其居中放置在盒子中间。
div {
height:200px;
width:200px;
border:solid 1px black;
text-align: center;
vertical-align:middle;
display: table-cell;
}
回答by Martin Matysiak
The thing is, vertical-align was mainly designed for specifying the behaviour of table-cells. Although the name suggests that any content shall be aligned in the middle, it simply does not.
问题是，vertical-align 主要用于指定表格单元格的行为。尽管名称暗示任何内容都应在中间对齐，但事实并非如此。
You can find a very good article hereabout what vertical-align really is and how to achieve your intended purpose - aligning the text vertically inside your div.
回答by Ben
Use line-height:200px, e.g.
使用line-height:200px，例如
div {
border:solid 1px black;
height:200px;
line-height:200px;
width:200px;
}
Also, in your example, you won't need vertical-align:middle. That style means that the divwill be vertically aligned to its parent element. It doesn't mean the text inside will be vertically aligned.
此外，在您的示例中，您不需要vertical-align:middle. 该样式意味着div将与其父元素垂直对齐。这并不意味着里面的文字会垂直对齐。
回答by user207421
The div is vertically aligned within whatever surrounds it. That doesn't affect what's inside. Make it smaller, in fact remove the width, and put it inside something bigger.
div 在它周围的任何地方垂直对齐。这不影响里面的东西。让它变小，实际上是去掉宽度，把它放在更大的东西里面。
回答by muirbot
This is way too much of a pain to do with a div. Use a table cell instead:
html: <table><tr><td>My Text</td></tr></table>
css: td { vertical-align: middle; }
用 div 做这件事太痛苦了。改用表格单元格：
html: <table><tr><td>My Text</td></tr></table>
css:td { vertical-align: middle; }
