我试图使一个链接,其中有一个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>
文本水平居中,而不是垂直居中。
你知道如何让文本在水平方向和垂直方向上居中吗?
发布于 2018-06-04 15:35:45
在CSS3中,您可以使用flexbox来实现这一点,而不需要任何额外的元素。
.link {
display: flex;
justify-content: center;
align-items: center;
}
发布于 2017-01-10 17:48:18
如果行数(或内部元素高度)未知,则使用display: table
和vertical-align
还有另一个技巧
.wrapper{
display: table;
}
.link{
display: table-cell;
vertical-align: middle;
}
发布于 2014-11-20 01:15:29
有一点需要补充。如果您删除下划线( text -decoration: none;),则文本将不会完全垂直居中。链接为下划线留出空格。据我所知,除了添加少量额外的顶部填充外,没有其他方法可以覆盖它。
https://stackoverflow.com/questions/14862604
复制相似问题