html - 定心部分

Question

我#offer在 section中将 div 居中时遇到了问题.tight。我不想使用，因为在宽度屏幕position: absolute;中正确显示站点的可能性。1024px

这是HTML：

<section class="main">
    <section class="tight">
        <div id="offers">
        <article class="offer">
            <div id="offer_stats"></div>
            text
        </article>
        <article class="offer">
            <div id="offer_comp"></div>
            text
        </article>
        <article class="offer last">
            <div id="offer_time"></div>
            text
        </article> 
        </div>
    </section>
 </section> 

和CSS：

section.main {
    min-width: 880px;
    max-width: 1200px;
    margin: 0 auto;
}
section.tight {
    width: 100%;
    margin: 0 auto;
    float: left;
}
#offers {
    float: left;
    padding-bottom: 100px;
    text-align: center;
}
article.offer {
    float: left;
    min-height: 178px;
    width: 260px;
    color: #59535e;
    padding-right: 50px;
}
article.offer.last {
    padding-right: 0;
}
article.offer div {
    height: 178px;
}
#offer_stats {
    background: url("../images/offer_stats.png") no-repeat;   
}
#offer_comp {
    background: url("../images/offer_comp.png") no-repeat;   
}
#offer_time {
    background: url("../images/offer_time.png") no-repeat;   
}

打印屏幕：

有什么建议么？

Answer 1

section.main {
  width: 880px;
  max-width: 1200px;
  margin: 0 auto;
}

Answer 2

首先，我建议你float: left;从#offers

#offers {
    padding-bottom: 100px;
    text-align: center;
}

其次，我建议你使用display: inline-block;而不是float: left;inarticle.offer

article.offer {
    display: inline-block;
    min-height: 178px;
    width: 260px;
    color: #59535e;
    padding-right: 50px;
}

看到这个jsfiddle