Как отцентрировать текст по вертикали
У начинающих верстальщиков часто возникает вопрос, как отцентрировать текст в блоке по горизонтали и вертикали. С горизонталью всё достаточно просто: используем свойство text-align. А вот для вертикали раньше приходилось прибегать ко всяческим ухищрениям. Но с появлением flex-верстки всё стало намного проще. Зададим в CSS класс, для которого пропишем выравнивание по центру по главной и вспомогательной оси:
.centered { display: flex; justify-content: center; align-items: center; text-align: center }
И просто применим его к нужному блоку:
<div class="centered">Немного текста <br /> и дополнительного <br />содержимого</div>
Проверим:
Немного текста
и дополнительного
содержимого
Если же не задавать text-align, то получим ещё один интересный эффект: текстовый блок будет отцентрирован относительно контейнера, но сам текст в нём не будет выровнен по середине. Это может быть полезно, скажем, при вёрстке различных врезок, выделюящих ключевые мысли в статье:
Немного текста
и дополнительного
содержимого
Если чисто однострочный текст (как в кнопках) нужно отцентрировать, то можно и без флексов это сделать так:
.centered { text-align: center; line-height: <равен высоте контейнера>px; }