CSS布局-将两个div并排居中并对齐

Question

我试图在标签内并排对齐两个社交按钮

文本对齐：居中不适用于按钮，也不浮动：左或浮动：右

jsfiddle链接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

尝试http://jsfiddle.net/htajL17y/2/

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

简单地说，我给了这些物品margin: 0 auto。这将迫使左右边缘保持均匀。

请注意，中心基于您设置的400px宽度。通过删除这些宽度并将其设置为该宽度，可以display: inline-block更准确地将div调整为内容的大小。显然，这提供了不同的外观，但更准确地将按钮居中。