HTML/CSS - 文本不能在按钮内居中

Question

所以，这是我第一次接触 HTML/CSS，当然，我在某些部分遇到了问题。

我在 setup.html 中创建了一个“继续”按钮并给它一个类，以便我可以在我的 styles.css 中设置它的样式，现在问题是文本对齐中心在按钮上不起作用。我的 index.html 中还有一个“开始”按钮，但奇怪的是文本对齐中心在那里工作。我尝试为两个按钮提供相同的类和不同的类。我不确定现在该做什么。\

我的 HTML 按钮：

<div class="startcontainer">
        <a href="./home.html">
            <button id="continue"><span>Continue</span></button>
        </a>
</div>

我的 CSS：

.startcontainer {
    position: fixed;
    border-radius: 5px;
    width: calc(100% - 20px);
    height: calc(100% - 120px);
    left: 10px;
    right: 10px;
    bottom: 3%;
    margin-bottom: 10px;
    padding: 0px;
    background-color: #1F1F1F;
    float: middle;
    text-align: center;
}

.startcontainer a {
    position: relative;
    display: block;
    margin: 0 auto;
    top: 40%;
    text-decoration: none;
    border: 0;
}

.startcontainer a #continue {
    position: relative;
    max-width: 280px;
    max-height: 60px;
    line-height: 60px;
    padding: 10px 100px;
    font-size: xx-large;
    background-color: #1F1F1F;
    color: #FFFFFF;
    opacity: .87;
    line-height: normal;
    font-family: 'Open Sans', sans-serif;
    border: 5px solid  #8644A1;
    border-radius: 45px;
    display: block;
    margin: 0 auto;
    top: 40%;
    transition: 0.4s;
    outline: 0;
    cursor: pointer
}

.startcontainer a #continue span {
    display: block;
    line-height: 30px;
    
}

.startcontainer a #continue:hover {
    background-color: #8644A1;
}

就像我说的，我的 styles.css 中的#contine 部分与“开始”按钮完全相同，但它仅适用于开始按钮。

Answer 1

问题在于按钮的max-width: 280px; 和padding: 10px 100px;。

您在水平刻度上提供 200 像素的填充，然后您将按钮宽度限制为 280 像素。其中仅留下 80px 的文本。删除按钮宽度以获得更好的按钮外观。或者，您可以权衡任何 CSS 属性而不是其他属性。

.startcontainer {
    position: fixed;
    border-radius: 5px;
    width: calc(100% - 20px);
    height: calc(100% - 120px);
    left: 10px;
    right: 10px;
    bottom: 3%;
    margin-bottom: 10px;
    padding: 0px;
    background-color: #1F1F1F;
    float: middle;
    text-align: center;
}

.startcontainer a {
    position: relative;
    display: block;
    margin: 0 auto;
    top: 40%;
    text-decoration: none;
    border: 0;
}

.startcontainer a #continue {
    position: relative;
/*     max-width: 280px; */
    max-height: 60px;
    line-height: 60px;
    padding: 10px 100px;
    font-size: xx-large;
    background-color: #1F1F1F;
    color: #FFFFFF;
    opacity: .87;
    line-height: normal;
    font-family: 'Open Sans', sans-serif;
    border: 5px solid  #8644A1;
    border-radius: 45px;
    display: block;
    margin: 0 auto;
    top: 40%;
    transition: 0.4s;
    outline: 0;
    cursor: pointer
}

.startcontainer a #continue span {
    display: block;
    line-height: 30px;  
}

.startcontainer a #continue:hover {
    background-color: #8644A1;
}

<div class="startcontainer">
  <a href="./home.html">
    <button id="continue"><span>Continue</span></button>
  </a>
</div>