行を中央に揃える方法は？

Question

このように真ん中に2行を中央に配置する必要があります。フレックスを使わないようにしています。

https://codepen.io/anon/pen/WjyxME

<section class="content"> 
    <div class="row"> 
    <div class="square" id="square-1"></div> 
    <div class="square" id="square-2"></div> 
    <div class="square" id="square-3"></div> 
    <div class="square" id="square-4"></div> 
    </div> 
    <div class="row"> 
    <div class="square" id="square-5"></div> 
    </div> 
</section> 

>

.content { 
    font-size: 0; 
} 

.square { 
    height: 10rem; 
    width: 118px; 
    display: inline-block; 
    margin: 1rem 1.5%; 
    background: #000000; 
} 

Answer 1

は、あなたが自動マージンを使用することに加えて、コンテナのそれよりも小さい行の幅を定義する必要がありますhereを紹介する新しいCodePenが作成されました。

希望すると便利です。 :)

Answer 2

あなたは

余裕でセンタリングすることができます：0自動;

であり、親はtext-align：centerを持つことができます。

.row { 
    width: 50%; 
    margin: 0 auto; 
} 

I：私が正しくあなたを理解していれば

Center Like this

.content { 
font-size: 0; 
} 

.row { 
    text-align:center; 
} 
.square { 
    height: 10rem; 
    width: 118px; 
    display: inline-block; 
    margin: 1rem 1.5%; 
    background: #000000; 
} 

    #square-5 { 
    margin: 0 auto; 
} 

Answer 3

.content { 
    font-size: 0; 
} 

.row { 
    text-align:center; 
} 
.square { 
    height: 10rem; 
    width: 118px; 
    display: inline-block; 
    margin: 1rem 1.5%; 
    background: #000000; 
} 

#square-5 { 
    margin-left: -455px; 
} 

Code pen here