Centering A Group Of Buttons

I am attempting to center three buttons at the bottom of an MTML page and I cannot get them to center no matter what I try. Below is my last attempt. Any help appreciated!

HTML Code:

<div style="margin-left: auto;margin-right: auto">
<div class="btn-group">
    <a href="#" class="button">Top</a>
    <a href="page2.htm" class="button">Page Two</a>
    <a href="page3.htm" class="button">Page Three</a>
</div>
</div>

CSS Code:

.btn-group .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;

    font-size: 16px;
    cursor: pointer;
}

1 answer

  • answered 2017-11-12 20:41 Mustapha

    You just need to apply a center align to your parent div

    text-align: center;
    

    Check my answer in the following fiddle : https://jsfiddle.net/9bm1n9vb/

    I created a new css class just to avoid the inline css ;)