css - 按钮文本居中

Question

我有两个按钮，我希望文本居中，并且我在 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;
}

Answer 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>