HTML-CSS 中心文本在链接中水平和垂直
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14862604/
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
HTML-CSS Center Text horizontally and vertically in a link
提问by user1567896
I am trying to make a link which has a heightand a widthof 200px.
The text of the link shall be centered vertically and horizontally.
我正在尝试制作一个具有200pxheight和 awidth的链接。链接的文本应垂直和水平居中。
This is my CSS so far:
到目前为止，这是我的 CSS：
a:link.Kachel {
width: 200px;
height: 200px;
margin: 0 auto;
display: block;
text-align: center;
background: #383838;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
}
and this the HTML-code:
这是 HTML 代码：
<tr>
<td>
<a class="Kachel" href="#">Test</a>
</td>
</tr>
The text is horizontally centered but not vertically.
文本水平居中，但不是垂直居中。
Any idea how to get the text centered both horizontally and virtically?
知道如何使文本水平和虚拟居中吗？
回答by Eric Goncalves
remove all that other nonsense, and just replace heightwith line-height
删除所有其他废话，然后替换height为line-height
a:link.Kachel{
width: 200px;
line-height: 200px;
display: block;
text-align: center;
background: #383838;
}
jsfiddle: http://jsfiddle.net/6jSFY/
jsfiddle：http: //jsfiddle.net/6jSFY/
回答by Kilves
In CSS3, you can achieve this with a flexbox without any extra elements.
在 CSS3 中，您可以使用 flexbox 实现这一点，而无需任何额外元素。
.link {
display: flex;
justify-content: center;
align-items: center;
}
回答by James Donnelly
If the text is only on one line, you can use line-height:200px;- where the 200px is the same as the heightvalue.
如果文本仅在一行上，您可以使用line-height:200px;- 其中 200px 与height值相同。
If the text is on multiple lines and will always be on the same number of multiple lines, you can use paddingcombined with line-height. Example with 2 lines:
如果文本位于多行上并且始终位于相同数量的多行上，则可以padding与line-height. 2 行示例：
line-height:20px;
padding-top:80px;
This way the two lines will take up a total of 40px and the padding top puts them perfectly in the middle. Note that you'd need to adjust the heightaccordingly.
这样，两条线将总共占用 40 像素，并且填充顶部将它们完美地放在中间。请注意，您需要相应地调整height。
If there is more than one link and it will have any number of lines, you will need some accompanying JavaScript to fixthe padding on each.
如果有多个链接并且它有任意多行，您将需要一些附带的 JavaScript 来修复每个链接的填充。
回答by user2784627
Small point to add. If you remove the underline (text-decoration: none;) then the text will not be perfectly centred vertically. Links leave space for the underline. To my knowledge there is no way to override this except to add little extra top padding.
小点补充。如果删除下划线 (text-decoration: none;)，则文本将不会完全垂直居中。链接为下划线留出空间。据我所知，除了添加一些额外的顶部填充之外，没有办法覆盖它。
回答by Strae
If the number of rows (or the inner element height) is not known, there is another trick using display: tableand vertical-align:
如果不知道行数（或内部元素高度），还有另一个使用display: tableand 的技巧vertical-align：
.wrapper{
display: table;
}
.link{
display: table-cell;
vertical-align: middle;
}
回答by Strae
Maybe using padding? Like:
也许使用填充？喜欢：
padding-top: 50%;
