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

Posted 2023-03-05

【中文标题】CSS 布局 - 并排居中并对齐两个 div

【英文标题】：CSS layout - center & align two divs side by side

【发布时间】：2014-11-10 11:55:02

【问题描述】：

我尝试在标签内并排居中对齐 2 个社交按钮

text-align: center 不适用于按钮，float: left 或 float: right

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;

【参考方案1】：

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

.social-tw, .social-fb

    display: inline-block;
    margin: 0 auto;

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

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

【参考方案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;

【参考方案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 不支持以// 开头的行cmets，您只能使用/* */ 样式。