垂直居中對齊文本按鈕

Question

我想垂直居中對齊按鈕中的兩組文本。我該怎麼做呢？

我演示：http://jsfiddle.net/fc6317ne/

a.block { 
 
    color: #ffffff; 
 
    background: #F0F0F0; 
 
    font-size: 0.8rem; 
 
    height: 60px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    width: 30%; 
 
    float: left; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<a href="" class="block active">Button</a> 
 

 
<a href="" class="block active">Button That Has More Words</a>

Answer 1

您可以在錨使用display:table屬性，然後換一個跨度內的文本，並將其顯示爲table-cell，具有垂直取向中間跨度。

您不需要爲此調整行高或填充。 Fiddle

a.block { 
 
    color: #red; 
 
    background: #F0F0F0; 
 
    font-size: 0.8rem; 
 
    height: 60px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    width: 30%; 
 
    float: left; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
    display: table; 
 
} 
 
span { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<a href="" class="block active"><span>Button</span></a> 
 

 
<a href="" class="block active"><span>Button That Has More Words</span></a>

Answer 2

只需添加line-height: 60px;您a.block CSS

小提琴：http://jsfiddle.net/ghorg12110/fc6317ne/1/

Answer 3

嘗試這樣的：Demo

CSS：

a.block { 
    color: #000; 
    background: #F0F0F0; 
    font-size: 0.8rem; 
    height: 60px; 
    line-height:60px; 
    text-align: center; 
    text-decoration: none; 
    width: 30%; 
    float: left; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    display: block; 
    vertical-align: middle; 
} 
span{ 
    line-height:22px !important; 
    display: inline-block; 
    vertical-align: middle; 
} 

HTML：

<a href="" class="block active"><span>Button</span></a> 

<a href="" class="block active"><span>Button That Has More Words</span></a>