垂直居中对齐文本按钮

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>