按钮文本居中

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>

按钮文本居中

Button Text Centering

css

text-align

button