CSS按钮-垂直居中文本

wsxa1bj1 于 2023-11-19 发布在其他

关注(0)|答案(6)|浏览(114)

我有一个按钮，这是一个简单的锚标签风格与以下-

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

字符串
我有问题垂直居中的文本内的按钮，它似乎在某些设备的罚款，但在其他中心。
有人能推荐一种方法来解决这个问题，或者一个更好的解决方案来实现同样的结果吗？
欢呼

css

来源：https://stackoverflow.com/questions/8258602/css-button-vertically-centre-text

6条答案

按热度按时间

lawou6xi1#

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

赞(0）回复(0）举报 2023-11-19

gr8qqesn2#

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

赞(0）回复(0）举报 2023-11-19

2skhul333#

Flexbox帮我搞定了它，假设你有一个excel按钮（实际上是一个锚标签）。

超文本标记语言

<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）回复(0）举报 2023-11-19

2mbi3lxu4#

我会使用line-height作为bchhun如上所述。此外，padding-top和padding-bottom可以帮助。

赞(0）回复(0）举报 2023-11-19

nhhxz33t5#

你可以复制这段代码，把它作为一个CSS和调整的东西，你需要的

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

字符串

赞(0）回复(0）举报 2023-11-19

5q4ezhmt6#

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

赞(0）回复(0）举报 2023-11-19

我来回答

CSS按钮-垂直居中文本

6条答案

相关问题

热门标签

最新问答