Clever Geek Handbook

CSS layout - center and align two divs side by side

I tried to center and align 2 social buttons side by side in a tag

text-align: center doesn't work for buttons and doesn't 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;
}
+4


source to share


3 answers


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

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


I just gave the margin: 0 auto

items margin: 0 auto

. this will force even the margins to the left and right.

Note that the centers are based on the 400px width you set. By removing these widths and setting the elements to display: inline-block

it will more accurately size the div for the content. Obviously this provides a different look, but more accurately centers the buttons.

+5


source


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


source


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


source






More articles:


All Articles