为什么按钮的文字在中间不对齐？

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中。