垂直居中对齐文本按钮

问题描述：

我想垂直居中对齐按钮中的两组文本。我该怎么做呢？垂直居中对齐文本按钮

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>

答

您可以在锚使用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>

谢谢!!这看起来很完美:) – michaelmcgurk 2015-03-25 12:29:51

@michaelmcgurk ..很高兴 – 2015-03-25 12:30:21

答

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

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

这是正确的方式 – saj 2015-03-25 12:24:33

我的话在这里消失：http://jsfiddle.net/fc6317ne/2/ – michaelmcgurk 2015-03-25 12:25:14

答

尝试这样的：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>

垂直居中对齐文本按钮

相关推荐