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

Question

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

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

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

Answer 1

添加         vertical-align：middle; 到你的CSS。

Answer 2

使用line-height：

a { line-height: 50px; }

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

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

Answer 3

在处理行高时最好使用％或em。不同浏览器以不同方式呈现文本（大小）当你使用％时，它会相应地调整自动。

a { line-height: 1.3em; }