CSS按钮 - 垂直居中文本

时间:2011-11-24 14:26:50

标签: css cross-browser

我有一个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;
}

我在按钮中垂直居中显示文本时遇到问题,在某些设备中显示正常,但在其他设备中偏离中心。

有人可以推荐一种解决方法或更好的解决方案来达到相同的效果吗?

干杯

6 个答案:

答案 0 :(得分:11)

<强> 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-topmargin-top进行垂直对齐。只需使用display: table-cell;vertical-align: middle;即可。多数民众赞成。

答案 1 :(得分:7)

使用line-height将其垂直居中。我通常使用与其高度相同的值。

答案 2 :(得分:4)

Flexbox帮助我钉牢了它。假设您有一个excel按钮(实际上是一个锚标记)。

HTML

<a class="btn-excel" href="/Export/ExportListToExcel">
    Export To Excel
</a>

CSS

.btn-excel {
    background-color: #32CD32; /*lime green*/
    color: #fff;
    outline: none;
    border-radius: 0.3rem;
    text-decoration: none;
    width: 5rem;
    height: 2.5rem;
    /* Flex rules 'em all */
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-excel:hover {
    background-color: #808000; /*olive*/
    cursor: pointer;
    text-decoration: none;
}

答案 3 :(得分:0)

您是否尝试为链接设置字体大小?每个浏览器可能都有自己的默认大小,因此可能是一个提示。填充和宽度/高度也要小心,如果添加填充,则需要减小块大小,因为填充包含在宽度中。例如,没有填充的100px宽度的简单块将具有100px的大小:ok。添加padding-left: 10px;,您的块现在宽度为110px。 ;)

答案 4 :(得分:0)

如上所述,我会使用line-height作为bchhun。此外,padding-top&amp; padding-bottom可以提供帮助。

答案 5 :(得分:0)

您可以复制此代码并将其作为CSS并根据需要进行调整

.btn-alignment{
    width: 88px;
    height: 40px;
    margin: 0 auto;
    padding: 0;
    display: inline-block;
    line-height: 40px;
    margin-top: 9px;
    text-align: center;
}