我有一个Button是一个简单的锚标签,其样式如下 –
.buyBtn{
background:url(../images/buyBtn.png) no-repeat;
padding-top:4px;
width:97px;
height:28px;
margin-top:14px;
}
.buyBtn a{
color:#fff!important;
font-weight:normal!important;
text-decoration:none;
padding-left:27px;
padding-top:12px;
text-shadow:none!important;
}
我在按钮中垂直居中文本时遇到问题,在某些设备中看起来很好,但在其他设备中偏离中心.
任何人都可以推荐一种方法来解决这个或更好的解决方案,以达到相同的效果吗？
干杯
解决方法
HTML：
<div class="buyBtn"><a href="#">Button</a></div>
CSS：
.buyBtn{
background:url(../images/buyBtn.png) no-repeat;
width:97px;
height:28px;
display: table-cell;
vertical-align: middle;
}
.buyBtn a{
color:#fff!important;
font-weight:normal!important;
text-decoration:none;
padding-left:27px;
text-shadow:none!important;
}
无需使用填充顶部或边缘顶部进行垂直对齐.只需使用display：table-cell;和vertical-align：middle;.而已.
