Блог

Главная - Вопросы по программированию - Выравнивание по левому краю -плавающие разделы по центру

Выравнивание по левому краю -плавающие разделы по центру

#css #css-float

#css #css-float

Вопрос:

У меня есть несколько плавающих по левому краю 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

Комментарии:

1. Несколько вариантов: 1. центрируйте контейнер — 2. вместо этого используйте встроенный блок —- 3 . используйте flexbox вместо float

2. просто использование встроенного блока в .el не работает

3. Нет, но это подход codepen.io/anon/pen/mALxOj для всех 3 вам нужно немного больше

Ответ №1:

Используйте медиа-запросы CSS для разного разрешения экрана, чтобы переносить дивы при изменении размера браузера. Используйте следующий CSS, чтобы сделать дивы горизонтально центрированными. Например:

 .outer_container{
    margin: 0 auto;
 }

где outer_container — это имя класса css для out div, который содержит все дочерние divs.

Ответ №2:

Понял. Основная идея:

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

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

Исправлен пример CodePen

Ответ №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>