0

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

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

1 ответ 1

0

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.