Задать вопрос
swibong
@swibong
No system is safe.
html

Почему не получается отцентрировать текст по вертикали?

Добрый вечер.

HTML:
<body>
  <div class="header">
      London
      Paris
      Tokyo
  </div>
...

CSS:
.header {
      height: 70px;
      background-color: #181818;
      color: white;
      text-align: center;
      vertical-align: middle;
      padding: 5px;
    }


По вертикали я могу задавать расположение текста, а по вертикали нет. Почему?
Нужно, чтобы текст в шапке был расположен по середине по вертикали, но почему-то не поддаётся.
И следом вопрос: нужно ли в хедер вставлять ещё один div с классом nav или это лишнее?
  • Вопрос задан
  • 557 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Решения вопроса 2
thewind
@thewind
php программист, front / backend developer
используйте flex, для многострочного текста никакие извраты с vertical-align и line-height не помогут.
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
Ответ написан
1 комментарий
1 комментарий
Raxen
@Raxen
TechLead Frontend Developer, Beeline
vertical-align не так работает, не путайте с атрибутом valign в html разметке,
Про работу свойства vertical-align можно почитать здесь: htmlbook.ru/css/vertical-align

vertical-align может центрировать контент внутри блока только если display у элемента стоит table-cell
Вот небольшой примерчик вертикального центрирования codepen.io/irodger/pen/ZWaRoo
Ответ написан
13 комментариев
13 комментариев
Пригласить эксперта
Ответы на вопрос 3
alsopub
@alsopub
Свойство vertical-align работает только со строчными элементами или строчными блоками и ячейками таблицы. В случае применения не к ячейкам таблицы, оно действует на сам элемент, а не на его содержимое.

web-standards.ru/articles/vertical-align
Ответ написан
Комментировать
Комментировать
@ommunist
Делаю и поддерживаю мультиязычные сайты
у родительского элемента должна быть position:relative; если дочерний элемент центрируется с position:absolute

А вообще есть 6 методов
Ответ написан
Комментировать
Комментировать
glamurchik
@glamurchik
height: 70px
что здесь вертикально?
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
350 руб./за проект
Аппликация для фильтра заказов
22 дек. 2024, в 20:40
10000 руб./за проект
Расширение для Google Chrome
22 дек. 2024, в 20:34
3000 руб./за проект
Ещё заказы