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

【问题标题】：Why is the text-align property not working inside a button element?为什么 text-align 属性在按钮元素中不起作用？
【发布时间】：2018-12-07 10:13:55
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

.btnwrap {
  text-align: center;
}

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

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

【讨论】：

请检查提问者的Note，上面写着i am not asking how to align the button, i am asking why is the text-align not working
这就是我在回答中包含的内容。这就是他遇到问题的原因，并为此添加了替代解决方案。
嗨，我已经发布了代码的截图和下面的输出，你能检查一下并告诉我我做错了什么吗？按钮的“父级”是什么？我尝试添加边距 0 但仍然无法正常工作。
也检查了您的屏幕截图和代码。 'parent' 是一个包装其子元素的 html 元素。正如我已经提到的，将text-align:center 分配给按钮本身是行不通的，您需要将按钮放在其他一些元素中，例如<p> 并将text-align:center 分配给它。我已在我编辑的答案中包含解决方案，请查看。
感谢中心。是的，我知道将按钮放在 p 或 h1 父级中会使它在中心移动，但我不明白的是，为什么我必须把它放在父级中，为什么文本对齐不起作用，如果它在里面按钮代码？是因为我在按钮中分配的代码适用于按钮，因此分配文本对齐将应用于按钮本身的文本，而移动按钮需要移动按钮所在的位置？那有意义吗？我还没学过课，我还在学习和试验html。

【解决方案2】：

尝试自动添加边距

text-align: center;
margin: auto;

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

【讨论】：