浮動要素をカスタム幅でセンタリング

Question

今日私はカスタム幅を設定した浮動要素のセンタリングに大きな問題に直面しています。より良い説明のために私はあなたのためのスニペットを作った：

body { text-align: center; } 
 
.square { 
 
    width: 20%; height: 100px; 
 
    background: cornflowerblue; 
 
    float: left; 
 
} 
 

 
.container { 
 
    display: inline-block; 
 
}

<div> 
 
    <div class="container"> 
 
    <div class="square">a</div> 
 
    <div class="square">b</div> 
 
    <div class="square">c</div> 
 
    </div> 
 
</div> 
 
<br> 
 
<div> 
 
    <div class="container"> 
 
    <div class="square">a</div> 
 
    <div class="square">b</div> 
 
    <div class="square">c</div> 
 
    <div class="square">d</div> 
 
    <div class="square">e</div> 
 
    </div> 
 
</div>

問題は、最初の3つの正方形を中心とした後に縮めしてしまうことがあります。

私が要素を浮動させるのは、2番目のコンテナが最初のコンテナと同じでなければならず、5つの要素（ドキュメントの全幅をカバーする）を含まなければならないということです。ここで（要素間のgabsを参照）、それは浮動せずにどのように見えるかです：

body { text-align: center; } 
 
.square { 
 
    width: 20%; height: 100px; 
 
    background: cornflowerblue; 
 
    display: inline-block; 
 
} 
 

 
.container { 
 
    display: block; 
 
}

<div> 
 
    <div class="container"> 
 
     <div class="square">a</div> 
 
     <div class="square">b</div> 
 
     <div class="square">c</div> 
 
    </div> 
 
</div> 
 
<br> 
 
<div> 
 
    <div class="container"> 
 
     <div class="square">a</div> 
 
     <div class="square">b</div> 
 
     <div class="square">c</div> 
 
     <div class="square">d</div> 
 
     <div class="square">e</div> 
 
    </div> 
 
</div>

今の要素が、右の幅を持っていますが、2行目は、理由の原稿の幅をカバーしていません要素間のギャブ

要素をカスタム幅で中央に配置する方法はありますか？どのスタイルをコンテナ要素に使うべきですか？

Answer 1

OK、私は私はあなたが

.square { 
width: 20%; height: 100px; 
background: cornflowerblue; 
display: inline-block; 
font-size: 1rem; 
} 

.container { 
display: block; 
font-size:0; 
} 

jsfiddle

Answer 2

body { text-align: center; } 
.square { 
    width: 20%; height: 100px; 
    background: cornflowerblue; 
    float: left; 

} 

.container { 
width:100%; 
margin-right:20%; 
margin-left:20%; 
} 

必要なものだと思うあなたはこのような何かを探していますか？

Answer 3

追加min-width:7px;これはあなたの問題

body { text-align: center; } 
 
.square { 
 
    width: 20%; 
 
    height: 100px; 
 
    background: cornflowerblue; 
 
    float: left; 
 
    min-width:7px; 
 
} 
 

 
.container { 
 
    display: inline-block; 
 
}

<div> 
 
    <div class="container"> 
 
     <div class="square">a</div> 
 
     <div class="square">b</div> 
 
     <div class="square">c</div> 
 
    </div> 
 
</div> 
 
<br> 
 
<div> 
 
    <div class="container"> 
 
     <div class="square">a</div> 
 
     <div class="square">b</div> 
 
     <div class="square">c</div> 
 
     <div class="square">d</div> 
 
     <div class="square">e</div> 
 
    </div> 
 
</div>

ここにあなたの5のdiv行の時代にも取り組んでいる解決します。