How do I center image links on same line?

Question

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>

Answer 1

*, 
*: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.

Answer 2

This is because they are both in separate divs with float:left;. Putting them in a single <div class="home_links"> tag should work once the float:left; is removed.

If you want the spacing to be equal between the links, setting a width percentage equal to 1/numberOfLinks will solve give the divs an appropriate width. In this case, the float:left; should stay.

Answer 3

Here you go:

http://jsfiddle.net/99u6C/1/

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>

CSS

.links_wrapper {
    margin:auto;
    text-align:center;
}
.home_links {
    display:inline-block;
}