CSS от А до Я: как вертикально центрировать текст и иконки

Дата публикации: 2016-11-25

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов о том, как вертикально центрировать текст и иконки.

V значит вертикальное центрирование текста и иконок

В видеоуроке по свойству vertical-align мы рассмотрели несколько способов вертикального центрирования элементов. В сегодняшней статье мы разберем три метода вертикального центрирования. То, что раньше считалось крайне сложным, теперь сделать очень легко.

Используйте свойство line-height для простого вертикального центрирования

Чтобы вертикально центрировать одну строку текста или иконку в контейнере, можно использовать свойство line-height. Свойство изменяет высоту строки текста, добавляя равные отступы сверху и снизу от контейнера инлайновых элементов. Если известна высота контейнера, то дочерние элементы можно вертикально центрировать, установив свойство line-height, равным этой высоте.

.container {
  width: 200px;
  height: 200px;
  line-height: 200px;
}

.container {

width: 200px;

height: 200px;

line-height: 200px;

}

Гибко центрируйте элементы по вертикали при помощи свойств position и transform

Метод с line-height – это костыль, который к тому же опирается на фиксированную высоту. Я стараюсь избегать явных значений height, так как в адаптивных проектах текст может в таком случае убегать за блок. Данный способ очень неповоротлив, особенно если вы работаете с произвольными элементами и жидкой высотой.

Для центрирования элементов с произвольной высотой по вертикали можно использовать свойства position и transform. К примеру, для центрирования элемента по высоте всего окна браузера можно использовать следующий код:

.container {
  position: relative;
  min-height: 100vh;
}
.vertical-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.container {

position: relative;

min-height: 100vh;

}

.vertical-center {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

}

Сперва мы задаем контекст позиционирования на контейнере при помощи свойства position: relative. Так мы сможем поместить элемент .vertical-center внутри границ контейнера.

Затем мы размещаем верхний левый угол элемента точно в центр контейнера. Для этого мы задаем смещение верхней и левой границы элемента на 50% от родителя.

В конце элемент сдвигается влево и вверх на 50% своей высоты и ширины. Мы получили вертикально центрированный элемент. Мы использовали значения в процентах, то есть если ширина или высота контейнера или дочернего элемента изменятся, сам элемент все равно останется точно в центре.

Центрируйте элементы по вертикали с помощью flexbox

Предыдущий метод по вертикальному центрированию элементов использует стандартную блоковую модель и техники позиционирования. Он работает в IE9+, но если вам нужно поддерживать браузеры с IE10+, вы можете уложиться в гораздо меньше строк кода с flexbox.

Способ представления макета в flexbox очень сильно отличается, но одно из его сильных качеств заключается в том, что данный инструмент умеет выравнивать элементы по вертикали и горизонтали. Для центрирования элемента с помощью flexbox необходимо прописать следующий код:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {

display: flex;

justify-content: center;

align-items: center;

}

Этот небольшой кусочек кода превращает наш .container в флекс-контейнер, а дочерние элементы автоматически становятся флекс-элементами. По горизонтали флекс-элементы можно центрировать при помощи свойства justify-content, а по вертикали с помощью align-items.

Автор: Guy Routledge

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Метки: css3