Задать вопрос
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 или это лишнее?
  • Вопрос задан
  • 552 просмотра
Комментировать
Подписаться 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 комментарий
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 140 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Доработать обмен заказами 1с
11 мая 2024, в 00:19
1000 руб./за проект
Разработка сайта (верстка)
10 мая 2024, в 23:51
30000 руб./за проект
Опубликовать приложение в Google play
10 мая 2024, в 23:33
2500 руб./за проект
Ещё заказы