Search code examples
htmlcssimagehyperlinkcenter

How do I center image links on same line?

My goal is to align three links on the same line and center them. I thought this was the way to do it, but it's not working. What am I doing wrong?

The CSS

.links_wrapper {
    margin:auto;
}
.home_links {
    float: left;
}

The HTML

<div class="links_wrapper">
    <div class="home_links">
        <a href="#"><img src="#"/></a>
    </div>

    <div class="home_links">
        <a href="#"><img src="#"/></a>
    </div>

    <div class="home_links">
        <a href="#"><img src="#"/></a>
    </div>
</div>
Solution 
  • *, 
*:before, 
*:after { 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
}
.home_links {
    max-width: 33%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
}

    Feel free to alter margins n stuff as needed.