我有一个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; }@H_404_4@我在按钮中垂直居中文本时遇到问题,在某些设备中看起来很好,但在其他设备中偏离中心. @H_404_4@任何人都可以推荐一种方法来解决这个或更好的解决方案,以达到相同的效果吗? @H_404_4@干杯
解决方法
HTML:
<div class="buyBtn"><a href="#">Button</a></div>@H_404_4@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; }@H_404_4@无需使用填充顶部或边缘顶部进行垂直对齐.只需使用display:table-cell;和vertical-align:middle;.而已.