2

青いコンテナー内の黄色いボックス (いくつであっても) を中央揃えにする必要があります。黄色のボックスは、数が多い場合は 2 列目 (または 3 列目など) に配置できますが、青色のコンテナー内で中央揃えのままにする必要があります。それを行う方法はありますか？

HTML

<div id="container">test
    <br />
    <div class="box">foo bar</div>
    <div class="box">foo bar</div>
    <div class="box">foo bar</div>
    <div class="box">foo bar</div>
</div>

CSS

#container {
    background:lightblue;
    width:100%;
}
.box {
    width:10em;
    float:left;
    background:yellow;
    margin:1em;
}

http://jsfiddle.net/585Eq/

4

4 に答える 4

1

あなたはで試すことができますdisplay:inline-block;

CSS を次のように変更します。

#container {background:lightblue;width:100%; text-align:center;}
.box {width:10em; display:inline-block; background:yellow; margin:1em;
}

デモ JSFIDDLE

于 2013-09-16T20:04:40.187 に答える