Search code examples
cssbuttontext-align

Button Text Centering

I have two buttons where I want the text centered in them and I have text-align: center set in my CSS, yet for some reason the text is not center aligned in the buttons. Could anyone point out the problem in this 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;
}

save and cancel buttons

Solution

  • You just need to remove the hardcoded width. It simply cuts off the buttons.

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