CSS 按钮 - 垂直居中文本

发布于 2024-12-17 20:27:55 字数 482 浏览 0 评论 0原文

我有一个按钮，它是一个简单的锚标记，样式如下 -

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

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

任何人都可以推荐一种解决此问题的方法或更好的解决方案来实现相同的结果吗？

干杯

原文

I have a Button that is a simple anchor tag styled with the following -

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

I'm having problems vertically centering the text within the button, it appears fine in some devices, but off centre in others.

Can anybody recommend a way to fix this or a better solution to achieve the same result?

Cheers

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

锦欢 2024-12-24 20:27:55

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

回复收藏 0 原文

雨落□心尘 2024-12-24 20:27:55

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; 即可。就是这样。

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

No need to use padding-top or margin-top for vertical align. Just use display: table-cell; and vertical-align: middle;. Thats it.

回复收藏 0 原文

两人的回忆 2024-12-24 20:27:55

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

Flexbox helped me nail it. Assume you have an excel button (an anchor tag, really).

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

回复收藏 0 原文

少女七分熟 2024-12-24 20:27:55

如前所述，我将使用 line-height 作为 bchhun。另外，padding-top & padding-bottom 可以提供帮助。

回复收藏 0 原文

黯然#的苍凉 2024-12-24 20:27:55

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

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

You can copy this code and put it as a CSS and adjust the things as you need

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

回复收藏 0 原文

柏拉图鍀咏恒 2024-12-24 20:27:55

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

回复收藏 0 原文

~没有更多了~