html - コンテナー内で要素を水平方向に中央揃えにする問題

Question

6 つの円をページの中央に水平に配置するのに苦労しています。.middle DIVそれらをwithおよび auto マージンに入れようとしましたdisplay: blockが、成功しませんでした - それらは .middle の左側に配置されているようです

http://jsfiddle.net/376wC/

助けてくれて本当にありがとうございます

.middle {
    width: 980px;
    height: 600px;;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background: #ccc;
}

Answer 1

を使用できますinline-block。円と余白のサイズを調整して、3 つだけが行に収まるようにする必要があります。したがって、私の例では、円の幅と高さが 10 ピクセル高くなり、各円の間に 4 つの余分なピクセルがあります。

http://jsfiddle.net/376wC/5/

circle_5px_margingまた、クラスを削除して、円に左右の余白を等しくすることもできます(私の例を参照)。