html - 为什么 text-align 属性在按钮元素中不起作用？

Question

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

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

注意:是的，我知道有一些方法可以将按钮居中对齐，我不是在问如何对齐按钮，我是在问为什么 text-align 不能像所有其他属性一样在按钮元素内工作在工作中？

Answer 1

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

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

.btnwrap {
  text-align: center;
}

然后，用 <p> 包裹你的按钮

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