Блог

Главная - Вопросы по программированию - выравнивание по вертикали внутри divs, содержащихся в div, представляющем строку

выравнивание по вертикали внутри divs, содержащихся в div, представляющем строку

#css

#css

Вопрос:

Я перепробовал практически все трюки с выравниванием по вертикали для div, которые я могу найти, и до сих пор не получил результатов. Это внутри установленной адаптивной среды, поэтому я сократил ее до некоторого встроенного CSS, чтобы показать проблему.

введите описание изображения здесь

 <div class="row uniform">
  <div style="clear:none;width:25%;float:left;background:#CCC;box-sizing:border-box;">
    box 1<br />
    line 2
  </div>
  <div style="clear:none;width:25%;float:left;background:#a43c69;color:#FFF;box-sizing:border-box;">
    box 2
  </div>
  <div style="clear:none;width:25%;float:left;background:#CCC;box-sizing:border-box;">
    box 3
  </div>
  <div style="clear:none;width:25%;float:left;background:#a43c69;color:#FFF;box-sizing:border-box;">
    box 4
  </div>
</div>

В идеале поля 2,3 и 4 имеют ту же высоту, что и поле 1, а текст во всех полях выравнивается по вертикали посередине.

row.uniform устанавливает некоторые поля, отступы и выравнивание базовой линии по вертикали по умолчанию, но здесь это ни на что не влияет.

Ответ №1:

Обратите внимание, что я удалил ваш float: left; для всех div .

 .row {
  display: table;
  width: 100%;
}
.row div {
  display: table-cell;
  float: none;
  vertical-align: top;
} 
 <div class="row uniform">
  <div style="clear:none;width:25%;background:#CCC;box-sizing:border-box;">
    box 1<br />
    line 2
  </div>
  <div style="clear:none;width:25%;background:#a43c69;color:#FFF;box-sizing:border-box;">
    box 2
  </div>
  <div style="clear:none;width:25%;background:#CCC;box-sizing:border-box;">
    box 3
  </div>
  <div style="clear:none;width:25%;background:#a43c69;color:#FFF;box-sizing:border-box;">
    box 4
  </div>
</div>

Для тех, кто интересуется поддержкой браузера, он поддерживается во всех основных браузерах.

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

1. Спасибо @DineiRockenbach! Волшебная комбинация в правильном порядке сделала свое дело.

Ответ №2:

простейшее решение и для получения более подробной информации обратитесь к css flexbox

Если вы хотите выровнять содержимое по центру, посмотрите эту демонстрацию

 .row {
  display: flex;
}
.row div{
  flex: 1
} 
 <div class="row">
  <div style="background:#CCC;">
    box 1<br />
    line 2
  </div>
  <div style="background:#a43c69;">
    box 2
  </div>
  <div style="background:#CCC;">
    box 3
  </div>
  <div style="background:#a43c69;">
    box 4
  </div>
</div>