按钮文本居中

【问题标题】：Button Text Centering按钮文本居中
【发布时间】：2020-10-20 06:17:04
【问题描述】：

我有两个按钮，我希望文本居中，并且我在我的 CSS 中设置了 text-align: center ，但由于某种原因，按钮中的文本没有居中对齐。谁能指出这个 CSS 中的问题？

.form-style-5 input[type="submit"],
.form-style-5 input[type="button"]
{
    position: relative;
    display: inline-block;
    padding: 19px 39px 18px 39px;
    color: #FFF;
    margin: 0 auto;
    background: #1abc9c;
    font-size: 18px;
    text-align: center;
    font-style: normal;
    width: 7%;
    border: 1px solid #16a085;
    border-width: 1px 1px 3px;
    margin-bottom: 10px;
}

【问题讨论】：

标签： css button text-align

【解决方案1】：

您只需删除硬编码的width。它只是切断了按钮。

.form-style-5
{
    position: relative;
    display: inline-block;
    padding: 19px 39px 18px 39px;
    color: #FFF;
    margin: 0 auto;
    background: #1abc9c;
    font-size: 18px;
    text-align: center;
    font-style: normal;
    border: 1px solid #16a085;
    border-width: 1px 1px 3px;
    margin-bottom: 10px;
}

<button class="form-style-5">Save</button>
<button class="form-style-5">Cancel</button>

【讨论】：

是的，谢谢。很抱歉那里的简单性只是没有意识到我设置的填充具有那种效果。宽度为 15%。
为了安全起见，我建议改用min-width。这样你就可以确定它不会被切断，但仍然有合适的宽度。