html - 如果文本占用两行，如何在按钮中垂直居中文本？

Question

如何在具有指定宽度和高度的按钮中垂直居中多行文本？

<a href="#">This text will take up two lines</a>

a {
    display: inline-block
    height: 50px;
    width: 100px;
}

Answer 1

使用line-height：

a { line-height: 50px; }

这仅在文本占用一行时才有效。如果您必须处理多行，您可以使用display: table-cell：

a { display: table-cell; vertical-align: middle; }

Answer 2

添加垂直对齐：中间；到你的 CSS。

Answer 3

处理行高时最好使用 % 或 em。不同的浏览器以不同的方式呈现文本（大小）；当您使用 % 时，它会相应地调整 auto 。

a { line-height: 1.3em; }