为什么按钮的文本没有在中间对齐

Question

这是html:

<button class="btncicle" >+</button>

CSS：

.btncicle {
border-radius: 50%;
width:15px;
height:15px;
padding: 0px;
text-align:center; 
vertical-align:middle;
line-height: 15px;
}

我使用了垂直对齐或行高，但按钮的文本仍然没有对齐到中间。

演示

为什么按钮的文本没有在中间对齐？

Answer 1

试试这个：更改线条高度特性。

线路高度：50%

Answer 2

使用此

增加1个像素

.btncicle
{border-radius: 50%;
width: 16px;
height: 16px;
padding: 0;
text-align: center;
vertical-align: middle;
border: 1px solid;
line-height: 50%;
text-align:center;
}

<button class="btncicle" >+</button>

Answer 3

请为按钮设置border:none，对齐将固定。

如果您需要按钮的边框，我们有一个替代解决方案。您可以设置box-sizing: content-box;。实际上，它是默认值，但在这种情况下，它不适用。所以你把它添加到css中。

Answer 4

您可以在按钮内部添加另一个<span>；在这种情况下使用display: flex。

即使你改变了按钮的大小，它总体上也是一致的。

这里的问题是字符font-size有点大。如果不断减少font-size或增加按钮，那么+字符肯定会"位于中间"。

.btncircle {
border-radius: 50%;
width: 15px;
height: 15px;
padding: 0px;
}
.btncircle span {
display: flex;
justify-content: center;
align-items: center;
line-height: 1px;
}
.btncircle2 {
width: 25px;
height: 25px;
}
.btncircle3 {
width: 45px;
height: 45px;
}

<button class="btncircle"><span>+</span></button>
<button class="btncircle btncircle2"><span>+</span></button>
<button class="btncircle btncircle3"><span>+</span></button>

Answer 5

保持线条高度小于高度和宽度，你就可以得到完美的按钮。示例：行高：12px；

.btncicle {
border-radius:50%;
width:15px;
height:15px;
padding: 0px;
line-height:12px;

}