lundi 5 mars 2018

CSS button wont horizontally center

I can't seem to horizontally center my two buttons.

I have tried adding the following to the landingpage-button element:

margin: 0 auto;


margin-left: auto;  
margin-right: auto;

I have also tried removing the complete margin part.

Here is the HTML code

<div class="landingpage-title">WELCOME TO NOVA PLASTOS</div>


<div>
    <a href="#" class="landingpage-button left">Nova Plastos Blog</a>
    <br />
    <br />
    <a href="#" class="landingpage-button right">Nova Plastos News</a>
</div>

Here is the HTML code, note that I have removed font specific CSS code(e.g. color, family and size) for readability

.landingpage-title {
    width: 1200px;
    text-align: center;
    margin: 180px auto;
}

.landingpage-button {
    background-color: black;
    border: 1px solid white;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px 32px;
    display: inline-block;
    text-align: center;
}

.landingpage-button:link {
    text-decoration: none;
}

.landingpage-button.left:link {
    font-family: Georgia;
}


.landingpage-button.right:link {
    font-family: sans-serif;
    font-weight: bold;
}

.landingpage-button:hover {
    color: black;
    background-color: white;
}




Aucun commentaire:

Enregistrer un commentaire