如果文本佔用兩行，如何垂直居中放置按鈕中的文本？

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

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

Answer 3

這將是最好使用％或行高打交道時他們。不同的瀏覽器以不同的方式呈現文本（大小）當您使用％時，會相應地調整自動。

a { line-height: 1.3em; }