HTML-CSS在链接中水平和垂直居中显示文本
HTML-CSS在链接中水平和垂直居中显示文本
提问于 2013-02-14 04:35:39
我试图使一个链接，其中有一个height和一个200px的width。链接的文本应垂直居中和水平居中。
到目前为止，这是我的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;
}这是HTML代码：
<tr>
<td>
<a class="Kachel" href="#">Test</a>
</td>
</tr>文本水平居中，而不是垂直居中。
你知道如何让文本在水平方向和垂直方向上居中吗？
回答 5
Stack Overflow用户
发布于 2018-06-04 15:35:45
在CSS3中，您可以使用flexbox来实现这一点，而不需要任何额外的元素。
.link {
display: flex;
justify-content: center;
align-items: center;
}Stack Overflow用户
发布于 2017-01-10 17:48:18
如果行数(或内部元素高度)未知，则使用display: table和vertical-align还有另一个技巧
.wrapper{
display: table;
}
.link{
display: table-cell;
vertical-align: middle;
}Stack Overflow用户
发布于 2014-11-20 01:15:29
有一点需要补充。如果您删除下划线( text -decoration: none;)，则文本将不会完全垂直居中。链接为下划线留出空格。据我所知，除了添加少量额外的顶部填充外，没有其他方法可以覆盖它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14862604
复制相关文章
相似问题
腾讯云开发者
