CSS layout - center & align two divs side by side

Question

I tried to center & align 2 social buttons side by side within the tag

text-align: center doesn't work for the buttons nor does float: left or float: right

jsfiddle link http://jsfiddle.net/htajL17y/

---

HTML:

<!-- footer area -->    
<footer>
    <div id="colophon" class="wrapper clearfix">
        COPYRIGHT 2014
        <br>
        Medialock Inc.
    </div>

    <div class="social-fb">
        <img src="http://i.imgur.com/c6h4Mw6.png"/ >
        <h3>
            facebook.com/medialock
        </h3>
    </div>

    <div class="social-tw">
        <img src="http://i.imgur.com/pHQnY64.png"/ >
        <h3>
            twitter.com/medialock
        </h3>
    </div>

</footer><!-- #end footer --> 

CSS:

/*FOOTER*/
footer{  
    background: #333;
    color: #ccc;
    text-align: center;
    float: center;
    padding: 20px 0;
}
footer ul{
    margin:0 0 0 8%;
    padding:0;
}

/* Footer social links */
.social-fb {
    width: 400px;
    padding: 20px;
    overflow: hidden;
}

.social-fb img, .social-fb h3 {
    float: left;
    width: 13%;
    line-height: 1em;
    margin-right: 15px;
}

.social-tw {
    width: 400px;
    padding: 20px;
    overflow: hidden;
}

.social-tw img, .social-tw h3 {
    float: left;
    width: 13%;
    line-height: 1em;
    margin-right: 15px;
}

Answer 1

Try http://jsfiddle.net/htajL17y/2/

.social-tw, .social-fb
{
    display: inline-block;
    margin: 0 auto;
}

Simply, I gave the items margin: 0 auto. that will force even margins left and right.

Note that centers based on the 400px width you set. By taking away these widths and setting the items to display: inline-block it will size the div to the content more accurately. Obviously, this provides different a appearance, but more accurately centers the buttons.