Как расположить блок по центру по вертикали в css

Как выровнять текст или блок по вертикали в CSS?

CSS выравнивание по центру

Делая верстку страницы, вы неизбежно столкнетесь с необходимостью сделать выравнивание текста по вертикали css, и у начинающих веб-разработчиков это может вызвать некоторые сложности.

В сегодняшней статье я хотела бы рассмотреть наиболее эффективные способы выравнивания текста по вертикали в CSS, которые вы смогли бы запомнить или добавить к себе куда-нибудь в шпаргалку и использовать в зависимости от ситуации.

Навигация по статье:

Свойство для вертикального выравнивания vertical-align

Базовым свойством, которое позволяет сделать в CSS выравнивание по вертикали является vertical-align.

В основном для выравнивания текста по вертикали css вам понадобятся значения top, middle, bottom. Они подходят для большинства случаев.

Так, в случае если нам нужно выровнять текст в каком-то блоке, то для начала оборачиваем его в тег </p> и задаем для него стиль vertical-align:middle;

Но на практике все оказывается немного сложней. Дело в том что данное свойство срабатывает только для табличных элементов и для того чтобы оно заработало нужно будет пойти на одну хитрость.

Для родительского элемента, то есть блока, в котором находится текст, мы задаем свойство display:table, а для абзаца с тексом – display:table-cell. В этом случае блок преобразуется в таблицу, а абзац в ячейку таблицы.

Вертикальное выравнивание элементов с помощью CSS

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

Ниже представлены популярные у верстальщиков приемы выравнивания по вертикали. Показывается, как они работают, и для каких случаев наиболее подходит каждый из них.

Вот два элемента div:

Каждый из способов будет применен для выравнивания внутреннего блока по центру наружного.

line-height для одной строки

Когда родитель занимает одну строку текста и высота потомка известна, можно применить свойство line-height. Значение свойства должно быть равным высоте внешнего блока. Это работает только для одной строки, поэтому потомку полезно добавить overflow: hidden и запрет переноса строки white-space: nowrap.

Не получится воспользоваться процентной записью line-height=100%, потому что 100% в этом случае — высота шрифта.

Способ применим только при известной высоте внешнего блока.

Таблица с vertical-align

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

• baseline — по умолчанию;
• bottom — содержимое внизу ячейки;
• middle — содержимое посередине ячейки;
• top — содержимое вверху ячейки.

В первом примере внешним блоком становится одинокая ячейка таблицы.

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

Этот недостаток исправляется обертыванием ячейки в родителя со свойством display:table. Этому элементу размер можно задать в процентах. Окончательно код будет выглядеть так:

Position: absolute + отрицательный margin

Способ применяется, когда известна высота внутреннего элемента. Для внешнего блока она может быть неизвестной. Родителю задается относительное позиционирование, а потомку внутри него абсолютное.

Значение свойства top, равное 50%, заставляет вложенный элемент расположиться верхним краем посередине внешнего блока. Остается поднять его отрицательным margin-top на половину собственной высоты, чтобы он встал точно по центру вертикали.

Недостаток этого способа в необходимости знать высоту потомка.

Выравнивание в строке с vertical-align

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

При известной высоте родителя этим свойством можно воспользоваться для центрирования многострочного текста.

Для внешнего блока прописывается центрирование одной строки.

Значение line-height для внутреннего блока переопределяется на normal или на любую требуемую величину. Ему же задается выравнивание vertical-align: middle и преобразование в строчно-блочный тип — display: inline-block.

Недостаток способа — надо знать высоту родителя.

Выравнивание с помощью transform

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

Свойство top со значением 50% опускает внутренний блок так, что его верхний край располагается посередине родителя. Значение translateY: -50%, поднимает элемент на половину его собственной высоты и тем самым совмещает вертикальные центры блоков.

Недостаток приема в ограниченной поддержке функций transform браузером IE.

Выравнивание через псевдоэлемент

Способ работает, когда высота неизвестна ни для первого, ни для второго блока. Внутрь родителя с помощью before или after добавляется строчный псевдоэлемент inline-block. Высота добавленного элемента должна равняться высоте родителя — height: 100%. Вертикальное выравнивание содержимого задается посредством vertical-align: middle.

С помощью vertical-align: middle относительно этого псевдоэлемента выравнивается внутренний блок. Так как родитель и потомок имеют одинаковую высоту, внутренний элемент, выравниваясь по вертикали с псевдоэлементом, центрируется также и с внешним блоком.

Универсальный способ. Не работает если внутреннему блоку задано абсолютное позиционирование.

Flexbox

Самый новый и простой способ выравнивания элементов по вертикали. Flexbox позволяет расставлять элементы Web-страницы как угодно. Чтобы выровнять блок по центру, достаточно родителю прописать display: flex, а потомку margin: auto.

Flexbox работает только в современных браузерах.

Выбор способа

Какой техникой вертикального выравнивания воспользоваться зависит от задачи и тех, ограничений, которые могут присутствовать в каком конкретном случае.

Высота элементов неизвестна

В этой ситуации можно воспользоваться одним из четырех универсальных способов:

1. Таблица. Родителем становится ячейка таблицы, созданная в HTML или через display-table/display-cell. Этому элементу-родителю присваивается vertical-align: middle.

2. Псевдоэлемент. Для внешнего блока создается строчно-блочный псевдоэлемент с width=100% и vertical-align: middle. Потомку прописываются display: inline-block и vertical-align: middle. Способ не работает только когда внутреннему блоку задано абсолютное позиционирование.

3. Transform. Родитель получает position: relative. Потомку присваивается position: absolute, top: 50% и transform: translateY(-50%);

4. Flexbox. Внешнему блоку ставится display: flex, внутреннему — margin: auto.

Известна только высота потомка

Внешний блок позиционируется относительно; внутреннему элементу прописываются абсолютное позиционирование, top: 50% и margin-top, равный половине его высоты.

Одна строка в блоке с известной высотой

Внешнему блоку задается свойство line-height со значением, равным его высоте.

Высота внешнего блока известна, а внутреннего элемента – нет.

Родителю ставится line-height равный его высоте. У потомка значение line-height переопределяется на normal или на любую требуемую величину, и задаются ему display: inline-block и vertical-align: middle.

Выравнивание блоков по вертикали

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

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

Когда табличная верстка стала историей, а на ее место пришла блочная модель, то с центрированием блоков по высоте возникли некоторые проблемы. Как оказалось, блочный элемент не понимает свойство vertical-align со значением middle. Однако, правила CSS могло решить проблему, переопределив блочное поведение на табличное. Это можно сделать с помощью свойства display, назначив ему значение table-cell. После этого блок будет восприниматься системой, как ячейка таблицы. И тут возникает вопрос, в чем же сложность. Ответ довольно предсказуем — Interner Explorer. Этот старичок не позволит Вам расслабляться. Дело в том, что браузер не может работать со значением table-cell. Но и на него можно найти управу, воспользовавшись программным решением на базе expression.

Наиболее распространенное решение

Итак, рассмотрим более подробно решение, которое упоминалось выше. Алгоритм действие довольно простой, хоть и мороки Вам хватит:

  • в первую очередь находим контейнер, внутри которого будет осуществляться вертикальная центровка. Указываем для него фиксированную высоту, воспользовавшись возможностями свойства height, а далее уже по известному сценарию. Определяем блочному элементу свойства ячейки и указываем значение middle для vertical-align. Таким образом, для большинства браузеров мы справились с поставленной задачей;
  • теперь возвращаемся к горячо любимому IE. Лечение на основе expression будет представлять из себя скрипт, который поможет вычислить браузеру высоту необходимого родителя и разместить контейнер в его центре. Если мы будем центровать текст, то для него нужно установить вспомогательный контейнер.

Для примера предлагаю выбрать именно тот случай, когда нужно равнять текст:

В результате чего в браузере получим следующую картину

пример текста по центру

По такому же принципу центруются картинки и прочие элементы.

При использовании данного метода стоит учитывать ряд особенностей, которые могут негативно повлиять на выравнивание:

  • нельзя присваивать родителю свойства плавающего элемента (float), так как в таком случае он определится браузером блочным элементом по умолчанию;
  • в тоже время нельзя допускать абсолютное и фиксированное позиционирование для этого же элемента (свойство position со значением absolute или fixed);
  • контейнер, который нужно выравнивать, должен позиционироваться, как блочный элемент (принципиально для IE).

Метод строчных блоков

Этот способ имеет очень много сходств с предыдущим. В соответствии с ним тоже прибегают к свойству display и vertical-align. Это позволяет отцентровать элементы во всех адекватных браузерах. Для всеми любимого старичка нужно снова обращаться к expression, однако в этом случае принцип его работы будет слегка отличаться. В этот раз мы вставим строчный контейнер, благодоря которому будет организовано необходимое выравнивание. Для сохранения чистоты кода предлагаю этот элемент добавить с помощью эмуляции before.

Если все выполнить по указаниям, то получим тот же результат в браузере, что и для предыдущего метода.

Избегаем использования expression

Также существует метод, позволяющий избежать применения expression. Он заключается в применении вспомогательного блока. Такой метод имеет свою особенность и вынуждает разделить верстку, предназначенную нормальным браузерам и для IE.

Такой код будет равнять блоки в нормальных браузерах, а для IE используем следующее

Добавить комментарий

Ваш адрес email не будет опубликован.