Question

出于某种原因，我的文字不在我的按钮的垂直中心。

＆＃13;

button {
    height: 35px;
    padding: 20px;

＆＃13;

<button>
Hi
</button>

＆＃13;

我需要保持填充和高度

Answer 1

然后删除顶部和底部填充

＆＃13;

button {
    height: 35px;
    padding:0 20px;
}

＆＃13;

<button>
Hi
</button>

＆＃13;

Answer 2

根据要求尝试增加高度和宽度

＆＃13;

button {
    height: 50px;
    width:60

＆＃13;

<button>
Hi
</button>

＆＃13;

Answer 3

＆＃13;

button {
  height: 35px;
  padding: 0 20px;
}

＆＃13;

<button>
Hi
</button>

＆＃13;

Answer 4

＆＃13;

button {
    height: 35px;
    padding: 20px;
    line-height: 0px;
    }

＆＃13;

<button>
Hi
</button>

＆＃13;

＆＃13; 添加行高度为0px。

请参阅jsFiddle： -

Answer 5

之所以发生这种情况，是因为您已将高度设置为35px，并且按钮周围的填充为20px。这实际上会使按钮高度为40px。

所以解决方法是删除顶部和底部填充，并将高度设置为40px。

＆＃13;

button {
   height: 40px;
   padding: 0 20px;
}

＆＃13;

<button>
Hi
</button>

＆＃13;

另一种解决方案也可以是将line-height设置为0，但上述解决方案更有意义，因为按钮实际上是40像素高，而不是30。