HTML-CSS 在链接中水平和垂直居中文本

Posted 2023-03-05

【中文标题】HTML-CSS 在链接中水平和垂直居中文本

【英文标题】：HTML-CSS Center Text horizontally and vertically in a link

【发布时间】：2013-01-29 12:48:08

【问题描述】：

我正在尝试创建一个具有 200px 的 height 和 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>

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

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

【参考方案1】：

删除所有其他废话，只需将height替换为line-height

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

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

【讨论】：

非常感谢。有时这很容易:)。

如果链接有height: 100%怎么办？

如果设置为 150%，通常行高垂直对齐，如果 a 元素的高度设置为 100%，我会使用它

这个解决方案很有意义，但前提是链接文本是单行。我目前正在努力寻找一种方法来垂直对齐范围从 1 到几行的链接文本。

【参考方案2】：

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

.link 
    display: flex;
    justify-content: center;
    align-items: center;

【参考方案3】：

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

如果文本位于多行并且始终位于相同数量的多行中，您可以将padding 与line-height 结合使用。 2 行示例：

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

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

JSFiddle example.

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

【参考方案4】：

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

.wrapper
    display: table;

.link
    display: table-cell;
    vertical-align: middle;

Example

Full article with details

【参考方案5】：

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

【参考方案6】：

也许使用填充？喜欢：

padding-top: 50%;

【讨论】：

这与此处的其他答案有何不同？

【参考方案7】：

在 CSS3 中，您可以尝试将 line-break 与对齐文本一起使用。

text-align: justify;
line-break: anywhere;