在一个链接中水平和垂直的HTML-CSS中心文本

我想制作一个链接，其中有一个height和一个width为200px。链接文本应垂直和水平居中。在一个链接中水平和垂直的HTML-CSS中心文本

这是我的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>

文本水平居中而不是垂直方向。

任何想法如何获得水平和正确的文本居中？

来源

2013-02-13 user1567896

删除所有其他的废话，只是更换heightline-height

a:link.Kachel{ 
    width: 200px; 
    line-height: 200px; 
    display: block; 
    text-align: center; 
    background: #383838; 
}

的jsfiddle：http://jsfiddle.net/6jSFY/

来源

2013-02-13 20:39:39

感谢。有时它很容易:)。 – user1567896 2013-02-13 20:51:51

如果链接的高度为100％，该怎么办？ – nicooga 2014-09-23 16:39:52

如果将其设置为150％，我将使用的线高度垂直对齐，如果a元素的高度设置为100，则使用该线条。 – albert 2015-06-17 15:02:48

如果文本仅在一行中，你可以使用line-height:200px; - 其中200像素的与height的值相同。

如果文字是多条线路上，将永远是相同数量的多条线路，则可以使用padding与line-height结合。实施例用2行：

line-height:20px; 
padding-top:80px;

通过这种方式，两行会占用总的40像素和所述顶部填充使他们完全在中间。请注意，您需要相应地调整height。

JSFiddle example。

如果有一个以上的链接，它会有什么行数，你将需要一些相关的JavaScript来修复每个填充。

来源

2013-02-13 20:39:48

小点补充。如果删除下划线（text-decoration：none;），那么文本将不会完全垂直居中。链接为下划线留出空间。据我所知，除了添加一些额外的顶部填充之外，没有办法覆盖这个。

来源

2014-11-19 17:15:29 user2784627

如果没有已知的行数（或内部元件高度），存在使用display: table和vertical-align另一特技：

.wrapper{ 
    display: table; 
} 
.link{ 
    display: table-cell; 
    vertical-align: middle; 
}

Example

Full article with details

来源

2017-01-10 09:48:18 Strae

在一个链接中水平和垂直的HTML-CSS中心文本

回答

相关问题