左の浮動小数点を中央に揃えます。

Question

左浮動小数点のdivがあります。ウィンドウのサイズが変更されると、自由にラップする必要があります。私はそれらを水平にセンタリングする必要があります。

.el { background: green; width: 200px; height: 40px; 
 
     border: 1px solid; float: left; margin: 5px; text-align: center;} 
 
.el:nth-child(odd) { background: red; } 
 
.el:nth-child(even) { background: yellow; }

<div id="container"> 
 
    <div class="el">1</div> 
 
    <div class="el">2</div> 
 
    <div class="el">3</div> 
 
    <div class="el">4</div> 
 
    <div class="el">5</div> 
 
    <div class="el">6</div> 
 
    <div class="el">7</div> 
 
    <div class="el">8</div> 
 
    <div class="el">9</div> 
 
</div>

Codepen： http://codepen.io/serhio/pen/PGZQwp

Answer 1

使用CSSメディアは、ブラウザのサイズ変更にdivをラップするために、異なる画面解像度のために照会します。 divを水平方向に中央にするには、次のCSSを使用します。例：

.outer_container{ 
    margin: 0 auto; 
} 

ここで、outer_containerはすべての子divを保持するout divのCSSクラス名です。

Answer 2

これが表示されます。主なアイデア：

#container { text-align: center; } 
.el { display: inline-block; }  

#container > * { text-align: initial; } /* resetting child align */ 

Fixed CodePen sample

Answer 3

あなたがこの結果を達成しようとしているかどうかを確認してください。

.el { background: green; width: 200px; height: 40px; 
 
     border: 1px solid; display:inline-block; margin: 5px; text-align: center;} 
 
.el:nth-child(odd) { background: red; } 
 
.el:nth-child(even) { background: yellow; } 
 
#container{margin:0px auto; width:100%; text-align:center} 
 
body{width:100%;}

<div id="container"> 
 
    <div class="el">1</div> 
 
    <div class="el">2</div> 
 
    <div class="el">3</div> 
 
    <div class="el">4</div> 
 
    <div class="el">5</div> 
 
    <div class="el">6</div> 
 
    <div class="el">7</div> 
 
    <div class="el">8</div> 
 
    <div class="el">9</div> 
 
</div>