45

我正在尝试创建一个具有200pxheight和 a的链接。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>

文本水平居中但不是垂直居中。

知道如何使文本水平和垂直居中吗？

4

7 回答 7

84

删除所有其他废话，然后替换height为line-height

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

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

于 2013-02-13T20:39:39.860 回答
43

在 CSS3 中，您可以使用 flexbox 来实现这一点，而无需任何额外的元素。

.link {
    display: flex;
    justify-content: center;
    align-items: center;
}
于 2018-06-04T07:35:44.827 回答
6

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

如果文本位于多行并且始终位于相同数量的多行上，则可以使用padding组合 with line-height。2行示例：

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

这样，两条线总共将占用 40px 并且填充顶部将它们完美地放在中间。请注意，您需要height相应地调整。

JSFiddle 示例。

如果有多个链接并且它会有任意数量的行，您将需要一些随附的 JavaScript 来修复每个链接的填充。

于 2013-02-13T20:39:48.070 回答
3

如果不知道行数（或内部元素高度），还有另一个技巧使用display: tableand vertical-align：

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

例子

包含详细信息的完整文章

于 2017-01-10T09:48:18.217 回答
2

补充一点。如果删除下划线（文本装饰：无；），则文本将不会完全垂直居中。链接为下划线留出空间。据我所知，除了添加一点额外的顶部填充之外，没有其他方法可以覆盖它。

于 2014-11-19T17:15:29.003 回答
0

也许使用填充？像：

padding-top: 50%;
于 2018-07-03T23:55:38.740 回答
0

在 CSS3 中，您可以尝试使用line-breakjustify 文本。

text-align: justify;
line-break: anywhere;
于 2021-06-17T07:29:35.053 回答