Рассмотрим, как можно сделать центровку по вертикали, привязав к ним кнопки, где можно сказать подучится что то похожее на горизонтальную навигацию. Но в нашем случай только выстроили горизонтальное центрирование. Существует несколько возможных способов сделать это. В случаях, когда высота относительно фиксированная, мы можем использовать line-height.
Если вы отрегулируете высоту линии до 3em, вы увидите, как сдвиг текста останется вертикально по центру. Попробуйте 4em, затем 5em. Это всего лишь один из многих методов, который можно применить. Мне это больше нравится, потому что это просто и соответствует цели.
В более крупном масштабе, возможно, потребуется использовать верхнее и нижнее дополнение в элементе контейнера. Это может быть неуклюжим, но может быть сделано для работы в правильных ситуациях. Цель, размеры и количество контента будут определяющими факторами.
Быстрый урок, показывающий вам простой метод центрирования любого элемента с помощью flexbox и только трех строк CSS. Flexbox - относительно новое дополнение к миру CSS, и мы продолжаем находить для него все более и более отличные приложения. Мы даже можем решить возрастную проблему с центрированием элемента как по вертикали, так и по горизонтали с помощью CSS. Это проще, чем вы можете себе представить, чтобы вы указывали размер центрированного элемента и отзывчивы.
Этот метод работает во всех современных браузерах - IE10 +, Chrome, Firefox и Safari с -webkit префиксомэ
Быстрый совет: простой способ центрирования элементов по вертикали и горизонтали.
HTML
Идея, конечно, вращается вокруг flexbox. Сначала мы создаем контейнер, в котором мы хотим, чтобы все было по центру:
Код
<div class="container"> <img src="Ссылка на изображение" alt="zornet.tu"> </div>
Вы можете разместить этот контейнер div в любом месте. В приведенном выше примере мы сделали это, взяв на себя всю ширину и высоту страницы.
CSS
Как мы говорили ранее, мы будем использовать только три строки кода.
Каждый гибкий контейнер имеет две оси для позиционирования элементов. Основная ось объявляется с flex-direction свойством может быть row или column. Опустив это правило, мы оставили направление гибкости по умолчанию row.
Теперь все, что нам нужно сделать, - это центрировать обе оси. Это не могло быть проще:
- Сделайте тип отображения flex, чтобы мы активировали режим flexbox. - justify-content определяет, где элементы гибкости будут выровняться в соответствии. - align-items делает то же самое с-осью, перпендикулярной основной, где вертикально в нашем случае.
Теперь, когда мы установили правила вертикального и горизонтального выравнивания в центр, любой элемент, который мы добавляем внутри контейнера, будет располагаться идеально посередине. Нам не нужно заранее знать его размеры, браузер сделает всю тяжелую работу!
Вывод
Существует множество других методов для центрирования контента с помощью CSS, но flexbox делает это намного проще и элегантнее.
