Question

我试图集中和在标签内并排排列2个社交按钮

text-align：center 不适用于按钮， float：left 或 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

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

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

简单地说，我给了margin: 0 auto项，这将强制左右边距。

请注意，它是基于您设置的400px宽度的中心。通过取消这些宽度并将项目设置为display: inline-block，它会更准确地将div的大小调整为内容。显然，这提供了不同的外观，但更准确地使按钮居中。

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

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

CSS布局 - 中心和并排排列两个div

3 个答案: