css - CSS按钮-垂直居中文本

我有一个Button，它是一个简单的 anchor 标签，样式如下:

.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;
}

无需使用padding-top或margin-top进行垂直对齐。只需使用display: table-cell;和vertical-align: middle;即可。而已。

关于css - CSS按钮-垂直居中文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8258602/