定心部分

Question

我遇到了在“.tight”部分中将div“#offer”居中的问题。我不想使用“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;代替article.offer

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

请参阅此jsfiddle