为什么文本对齐属性在按钮元素内不起作用？

Question

button {
    text-align: center;
    font-size:50px;
    color:black;
    border:2px solid white;
    border-style:dotted;
    border-color:red;
}

当我运行这段代码时，除了文本对齐之外的所有属性都有效。我不明白为什么文本对齐在按钮内时不起作用？

注意：是的，我知道有多种方法可以将按钮居中对齐，我不是在问如何对齐按钮，我是在问为什么文本对齐在按钮元素内部不起作用其他属性有效吗？

Answer 1

尝试自动添加保证金

text-align: center;
margin: auto;

或将 !important 给 text-align 可能还有另一个 css 代码影响你的按钮

Answer 2

不是这样的。将 text-align:center 属性分配给按钮本身不会将其居中对齐。您应该将此属性分配给它的父级。或者您可以为按钮分配宽度并添加 margin: 0 auto; 作为替代方式。

这是您问题的解决方案。添加此 CSS

.btnwrap {
  text-align: center;
}

然后，用 <p>

包裹你的按钮

<p class="btnwrap">
  <button>button 2</button>
</p>

Why is the text-align property not working inside a button element?