在填充修改的按钮元素中居中文本？答案

【问题标题】：Center a text in a padding modified button element?在填充修改的按钮元素中居中文本？
【发布时间】：2022-01-01 12:01:26
【问题描述】：

我尝试了多次但没有任何进展，我的理论是这是因为修改了元素的填充，如果我错了，请纠正我。

.button1{
    
    padding-right: auto;
    padding-left: 40px;
    padding-top: 10px;
    background-color: rgba(255, 166, 0, 0.671);
    border-radius: 20px;
    font-family: Roboto;
    text-align: left;
    font-size: 50;
    display: inline-block;
    margin-top: -20px;
    
    
  cursor: pointer;
  border: none;
}

在 HTML 文件中

<div align="center"><a href="someurl"><button class="button1"><p align="left">Continue</p></button></a></div>

【问题讨论】：

使用validator.w3.org/nu 验证返回许多错误。 1. div 元素上的 align 属性已过时。 2. 元素button 不得作为a 元素的后代出现。 3. 在此上下文中，元素 p 不允许作为元素 button 的子元素。 4. p 元素上的align 属性已过时。
而不是40px left 尝试20px left padding 和20px right
补充@vee 所说的，使用无效的 HTML 绝不是一种选择。

标签： html css element

【解决方案1】：

您的文本不在中心，因为您在 p 标签内写了“alight: left”。现在，使用“text-align: center”，您可以使用 CSS 在按钮上设置文本中心。

button.button1 {
    margin: 0 auto;
    border: 0;
    background-color: rgba(255, 166, 0, 0.671);
    border-radius: 20px;
    min-width: 95px;
    text-align: center;
    padding: 10px 0;
    line-height: normal;
    cursor: pointer;
}


button.button1 p {
    text-align: center;
    margin: 0;
}

<div align="center">
  <a href="someurl">
    <button class="button1">
      <p align="left">Continue</p>
    </button>
   </a>
</div>

【讨论】：

你的答案同样是无效的 HTML，这是从来没有一个选项。