CSS - "float left"と "text-align：center"の混合効果を達成するにはどうすればいいですか？

Question

これはかなり簡単な質問ですが、単純な解決策で私の頭を包むことはできません。私は3つの四角形を一列に配置する必要がありますが、私は四角形の総量を知りません（これに対する単純な解決策はtext-align: centerを使用することになります）。しかし、最後の要素を中心にしたくありません。短いストーリー、どのようにfloat: leftエフェクトを作成する+メインのコンテナ内のすべての要素を中心に？

jfiddle here。

HTML：

<div class="row b"> 
    <div class="col-lg-6 col-md-6 col-sm-12 col-lg-offset-3 col-md-offset-3"> 
    <div class="row maxW b"> 
     <div class="postContainer"></div> 
     <div class="postContainer"></div> 
     <div class="postContainer"></div> 
     <div class="postContainer"></div> 
    </div> 
    </div> 
</div> 

CSS：

.postContainer { 
    width: 230px; 
    height: 230px; 
    border: 1px solid lightblue; 
    display: inline-block; 
    } 

    .maxW { 
    max-width: 900px; 
    } 

    .ce { 
    text-align: center; 
    } 

.b{ 
    border:1px solid black; 
} 

期待される結果：
これらの正方形が応答する必要があり、行ごとの最大の正方形は、私がfloat: leftを使用している場合、私は私が必要なものをほとんど得る3です。しかし、正方形は左に引っ張られ、主容器の中心には置かれない。 text-align: centerを使用すると、四角形がメインコンテナの中央に配置されますが、最後の四角形を中央に配置したくない場合は、左に浮かせておく必要があります。

Answer 1

私はフレキシボックスを使用することをお勧めします。これはCSSのかなり新しい概念ですが、それはgood support in all modern browsersです。私は個人的にプロダクションでそれを使用します。

マークアップは次のように簡略化されます：

<div class="posts"> 
    <div class="postContainer"></div> 
    <div class="postContainer"></div> 
    <div class="postContainer"></div> 
    <div class="postContainer"></div> 
</div> 

そして、コンテナはCSSだろう：

.posts { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: flex-start; 
    margin: 0 auto; 
} 

Display: flexが、それはフレキシボックスのブラウザに指示し、flex-flowはそれがラップした行であることを述べていますコンテンツが左揃えの場合はflex-startとする必要があります。

Fiddle

Flexbox basics

Answer 2

コンテナの幅を33％に設定し、含まれているdivに投稿の境界線と幅を設定できます。

.postContainer { 
    width: 33%; 
    display: inline-block; 
    text-align: center; 
} 

.post { 
    width: 230px; 
    height: 230px; 
    border: 1px solid lightblue; 
    display: inline-block; 
} 

https://jsfiddle.net/k9597cLq/

Answer 3

あなただけdisplay:inline-block;の代わりfloat使用することができます。私はあなたの質問を取得していない

.maxW{ 
     border:1px solid black; 
     padding:5px; 
     } 

.postContainer{ 
       width:150px; 
       height:150px; 
       border:1px solid black; 
       display:inline-block; /* <-- the magic part*/ 
       } 

DEMO