按钮文本居中

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;
}

- CDA the Programmer

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>

- Jakub A Suplicki

---

是的，你说得对，谢谢。对于那个简单的问题我很抱歉，我没有意识到我设置的填充会产生那种效果。我将宽度调整为15%。 - CDA the Programmer

为了安全起见，我建议使用min-width而不是width。这样你可以确保它不会被截断，同时仍然具有合适的宽度。 - Jakub A Suplicki