CSS按钮 – 垂直居中文本

我有一个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;.而已.

原文地址：https://www.jb51.cc/css/215486.html