Как выровнять float элементы

326

26 ноября 2016, 18:42

Добрый день, начал изучать верстку и вот столкнулся с такой проблемой. Мне нужно выровнять элементы в шапке по центру по вертикали, но загвоздка в том что одна группа элементов имеет свойство float:left. Сначала я не понял в чем проблема, затем нашел одну из обучающих статей, где пишется что к float - vertical-align не применяется. Теперь я не знаю что делать. На картинке отображено что мне нужно сделать.

Мой код: https://codepen.io/chegonenko/pen/dpLJQb

Answer 1

Вы прочитали верно, но это не относится к вашему примеру. В вашем случае свойства float влияет только на элементы .l_part, .l_part, но не на их содержимое. Вам нужно лишь выровнять внутренности этих блоков. А так как все внутренние блоки у вас со свойствами inline-block, то они могут быть выровнены между собой.

Всем внутренним inline-block'ам задаем vertical-align: middle, чтобы они выровнялись между собой попарно. (.picture, .l_text, .r_text, .phone)
Для картинки задаем свойство display: block, чтобы она под собой не добавляла пустое пространство, что испортит выравнивание(читайте об этом отдельно, например здесь)
Внутрь заголовка .header после зафлоченых элементов - то есть в конец в вашем случае добавляем <div> со свойством clear: both, чтобы очистить обтекания. (что это и зачем это нужно делать читайте отдельно, например здесь)