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;
}

Solution 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.

Solution 2

Fixed

HTML:

<footer>
    <div id="colophon" class="wrapper clearfix">
        COPYRIGHT 2014
        <br>
        Medialock Inc.
    </div>
    <div class="container">
    <div class="social">
        <img src="http://i.imgur.com/c6h4Mw6.png"/ >
        <h3>facebook.com/medialock</h3>
    </div>
    <div class="social">
        <img src="http://i.imgur.com/pHQnY64.png"/ >
        <h3>twitter.com/medialock</h3>
    </div>
    </div>
</footer>

CSS:

/* Footer links */
.container {
    width: 100%;
    text-align:center;
}
.social {
    padding: 20px;
    margin: 0 auto;
    display: inline-block;
}
.social img, .social h3 {
    width: 13%;
    line-height: 1em;
    margin-right: 15px;
}

Solution 3

JSfiddle Demo

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

/* Footer links */
.social-fb,
.social-tw {
    /* width: 400px; -- not required */
    padding: 20px;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
}

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


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