html - 如何将 4 个盒子集中并排放置？

Question

    <section id="main-content">
        <div class="language-box html">HTML</div>
        <div class="language-box javascript">JAVACRIPT</div>
        <div class="language-box css">CSS</div>
        <div class="language-box php">PHP</div>
        <div class="clear"></div>
    </section>

我正在努力使这 4 个盒子集中并排在一起。

我正在使用这段代码，但它没有像我希望的那样工作:

#main-content {
    margin: 0 auto;
}


.language-box {
    width: 279px;
    height: 400px;
    background-color: white;
    float: left;
    margin: 0 auto;
}

http://i.imgur.com/V2DPlRa.png

Answer 1

您可以移除 float ，将元素显示为 inline-block 并将 text-align: center 设置为容器。

#main-content {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}


.language-box {
    width: 80px;
    border: 1px solid #000000;
    height: 400px;
    background-color: white;
    /* float: left;
    margin: 0 auto; */
    display: inline-block;
}

fiddle :http://jsfiddle.net/9k2ae5vv/