Выровнять левые плавающие divs в центре

Question

У меня есть левые плавающие divs. Они должны свободно обертывать, когда изменяется окно. Мне нужно сосредоточить их по горизонтали.

.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 Media Queries для различного разрешения экрана для того, чтобы обернуть дивы на браузер изменения размера. Используйте следующий CSS, чтобы сделать divs горизонтально центром. Например:

.outer_container{ 
    margin: 0 auto; 
} 

, где outer_container - это имя класса css для div, содержащее все дочерние div.

Answer 2

Got it. Основная идея:

#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>