在按钮中垂直居中对齐文本 [英] Align text centrally vertically in button
本文介绍了在按钮中垂直居中对齐文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想将按钮中的两组文本垂直居中对齐.我该怎么做?
I'd like to align both sets of text in the buttons centrally vertically. How do I do this?
我的演示: 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>
推荐答案
您可以在锚点上使用 display:table
属性,然后将文本包裹在一个范围内,并将其显示为 table-cell
,使跨度在中间垂直对齐.
You can use display:table
property on anchor and then wrap the text inside a span, and display it as table-cell
, with vertically aligning the span in middle.
您无需为此调整行高或填充.小提琴
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>
这篇关于在按钮中垂直居中对齐文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文