我有一个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;
}
我在按钮中垂直居中显示文本时遇到问题,在某些设备中显示正常,但在其他设备中偏离中心。
有人可以推荐一种解决方法或更好的解决方案来达到相同的效果吗?
干杯
答案 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-top
或margin-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;
}