我想将按钮中的两组文本垂直居中对齐。我该怎么做呢?
我的演示: 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
,并使范围在中间垂直对齐。
您无需为此调整行高或填充。小提琴
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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句