Html 如何在 div 元素中居中文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19273860/
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
How to center text in a div element?
提问by Tschareck
I'm trying to create square element, that will have text centered both vertically and horizontally. Additionally, the whole area of the square should be a link. This is my HTML:
我正在尝试创建方形元素，该元素将使文本垂直和水平居中。此外，广场的整个区域应该是一个链接。这是我的 HTML：
<div class="w1h1 medium">
<a class="userLink" target="_blank" href="Fancybox.aspx">
<table style="width: 100%; height: 100%">
<tr style="vertical-align: central">
<td style="text-align: center; font-weight: bold;">
text in the middle
</td>
</tr>
</table>
</a>
</div>
And this is my CSS:
这是我的 CSS：
div.w1h1 {
width: 150px;
height: 150px;
}
.medium {
background-color: #06849b;
color: white;
font-family: sans-serif;
}
a.userLink
{
width: 150px;
height: 150px;
display: table;
color: #FFFFFF;
text-decoration: none;
}
It works in Chrome and Firefox, but not in Internet Explorer. In IE the text is at the top of the square, not in the middle. Can you help me with this?
它适用于 Chrome 和 Firefox，但不适用于 Internet Explorer。在 IE 中，文本位于正方形的顶部，而不是中间。你能帮我解决这个问题吗？
I just created playground here: http://jsfiddle.net/Tschareck/yfnnm/
我刚刚在这里创建了游乐场：http: //jsfiddle.net/Tschareck/yfnnm/
回答by Gabriele Petrioli
You could simplify your structure a bit, and use display:table-cellon the aelement.
您可以稍微简化一下结构，并display:table-cell在a元素上使用。
html
html
<div class="w1h1 medium">
<a class="userLink" target="_blank" href="Fancybox.aspx">
text in the middle
</a>
</div>
css
css
div.w1h1 {
width: 150px;
height: 150px;
font-family:sans-serif;
background-color: #06849b;
}
a.userLink {
width: 150px;
height: 150px;
display: table-cell;
vertical-align:middle;
text-align:center;
color: #FFFFFF;
text-decoration: none;
}
Demo athttp://jsfiddle.net/yWLYV/1/
演示在http://jsfiddle.net/yWLYV/1/
works down to IE8
适用于 IE8
回答by bromy
A great way to get perfectly centered text is to use a flexbox layout. You can horizontally and vertically center the content of a container element with very little code:
获得完美居中文本的一个好方法是使用 flexbox 布局。您可以使用很少的代码水平和垂直居中容器元素的内容：
.container-with-centered-content {
display: flex;
align-items: center;
justify-content: center;
}
回答by Morpheus
回答by avalkab
try my technique; follow this
试试我的技术；按照这个
.outer{ float:left; width:100px; height:100px; background-color:#ccc; }
.innet{ float:left; width:100%; line-height:100px; text-align:center; }
<div class="outer">
<span class="inner">This is my text</span>
</div>
and morpheus all right! ;)
和睡眠正常！;)
回答by acairns
Try using: line-height: 150pxto set the height of the content within the box. This should work well if there is only a single line of content.
尝试使用：line-height: 150px设置框内内容的高度。如果只有一行内容，这应该很有效。
回答by LinkinTED
Try this one:
试试这个：
HTML:
HTML：
<a href="#">Text here</a>
CSS:
CSS：
a {
display: block;
width: 150px;
height: 150px;
background-color: #06849b;
color: white;
font-family: sans-serif;
vertical-align: middle;
line-height: 150px;
text-align: center;
text-decoration: none;
font-weight: bold;
}
And a demo.
和一个演示。
Please note that it only allows one line of text... is that a problem?
请注意，它只允许一行文本......这是一个问题吗？
EDIT, found a better solution, display the anchor as a table cell, works multiple line too:
编辑，找到了一个更好的解决方案，将锚点显示为表格单元格，也适用于多行：
a {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 150px;
height: 150px;
background-color: #06849b;
color: white;
font-family: sans-serif;
text-decoration: none;
font-weight: bold;
}
回答by SKeurentjes
Use valign="middle"in the <td>
使用valign="middle"在<td>
Example:
例子：
<td style="text-align: center; font-weight: bold;" valign="middle">
text in the middle
</td>
