Css выровнять по центру вертикали css: Все способы вертикального выравнивания в CSS / Хабр

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

Vertical align CSS — выравнивание по вертикали в помощью CSS

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

В данной статье мы рассмотрим:

• свойство vertical-align , как и когда оно работает;
• метод центрирования по вертикали элемента с известной высотой;
• центрирование по вертикали элементов с изменяемой высотой.

Vertical-align CSS

Свойство vertical-align влияет только на элементы, у которых свойство display имеет значения inline , inline-block или table-cell . Оно принимает в качестве значений число, проценты или ключевое слово.

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

Ключевые значения vertical-align могут быть следующими:

• baseline;
• sub;
• super;
• text-top;
• text-bottom;
• middle;
• top;
• bottom.

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

Рассмотрим наглядный пример вертикального выравнивания текста CSS с помощью vertical-align . У нас есть сетка с изображениями и текстом — все они разной высоты, поэтому не везде текст выравнивается красиво:

Чтобы всё аккуратно выровнять, можно задать контейнерам сетки свойство display: inline-block и использовать для изображений свойство vertical-align: bottom . Если бы в нашем примере не было текста, можно было бы использовать vertical-align: middle и легко добиться нужного результата.

Центрирование по вертикали

В примере, приведенном ниже, у нас есть div с чёрным фоном и рамкой. Внутри него находится блок поменьше с нужной нам шириной и высотой:

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

Применив к контейнеру свойство position: relative , можно задать абсолютное позиционирование внутреннему блоку. Если присвоить свойствам top и left значение 50%, блок сдвинется на 50% от верхнего и левого краёв. Верхний левый угол блока окажется точно в центре контейнера:

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

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

Адаптивное центрирование по вертикали

Fluid vertical center

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

Главный приём здесь — создать невидимый элемент ( используя псевдоэлемент ), который будет заполнять контейнер по высоте, и установить свойства display: inline-block и vertical-align:middle . После этого нужно выровнять внутренний блок, также установив ему свойства display: inline-block и vertical-align: center . Затем центрировать блок по горизонтали, используя text-align: center :

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

HTML/CSS: как центрировать по вертикали

При изучении стилизации HTML-страниц и механизмов выравнивания элементов средствами CSS, начинающий разработчик, как правило, сначала знакомится со способами горизонтального выравнивания элементов. В их числе, например, text-align: center; и margin: 0 auto; . С выравниванием по вертикали возникает больше вопросов. В этой статье разберем пять способов выравнивания элементов в HTML и CSS по вертикали.

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

1. У правила для горизонтального выравнивания текста text-align: center; , которое уже упоминалось выше, есть собрат, который называется vertical-align . Как и text-align , vertical-align выравнивает элементы со строчным или строчно-блочным типом бокса. Отличие в том, что свойство text-align применяется к родительскому блоку, а vertical-align необходимо применять непосредственно к выравниваемому элементу.

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

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

2. Для тех, кто не знаком с принципами работы интерлиньяжа и свойством line-height , может стать откровением, что текст располагается посередине содержащей его строки. Этим можно пользоваться при выравнивании. Предположим, что у вас есть элементарный footer, в котором нужно расположить по центру копирайт:

Допустим, что высота футера равна 80px. Для того, чтобы текст вертикально встал ровно по центру, достаточно написать в CSS следующее:

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

3. Для предотвращения нежелаемного поведения, описанного в примере выше, можно использовать метод выравнивания: padding . Значения padding-top и padding-bottom помогут вам не только центрировать по вертикали, но и застраховаться от переполнения. Рассмотрим пример:

Предположим, вы верстаете кнопку, при нажатии на которую происходит переход на страницу заказа товара. Высота кнопки не должна превышать 50px. Из макета вы выгрузили следующие стили:

Высота контента внутри кнопки равна высоте строки и составляет 20px. Чтобы текст кнопки встал по центру, необходимо распределить по свойствам padding-top и padding-bottom оставшееся пространство следующим образом: (50px — 20px) / 2.

В результате получаем следующее:

Если текст кнопки измениться с «Заказать» на «Заказать товар онлайн» и перестанет помещаться на одной строке, кнопка сохранит нужный вид, а текст внутри неё по-прежнему будет находиться по центру.

Выравнивание при помощи padding универсально и подходит как для фразовых элементов, так и для выравнивания элементов с блочным типом бокса (но только в некоторых случаях).

4. Еще один инструмент — Flexbox. Внутри flex-контейнера любой элемент, будь то блочный, строчный или даже псевдоэлемент, становится flex-элементом, с которым можно производить любые манипуляции. В этой статье мы не будем подробно останавливаться на flex-свойств, почитать о них можно, например, тут.

У Flexbox есть ряд преимуществ перед обыкновенным выравниванием — в первую очередь это создание крупных сеточных структур и макросеток.

5. А что, если элемент абсолютно спозиционирован? Предположим, что вы сверстали модальное окно, которое нужно спозиционировать не относительно другого элемента, а относительно окна браузера. В этом случае можно использовать position: fixed; .

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

Положением спозиционированных элементов управляют свойства top , right , bottom , left . Попробуем следующее:

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

У применения свойства margin в этой ситуации существует один недостаток. При изменении свойств width и/или height модального окна вам придется вручную «подкручивать» значения отрицательного margin , чтобы добиться половины размера его ширины и высоты. Этого можно избежать, используя вместо margin свойство transform . А transform: translate(X, Y) позволяет регулировать смещение элемента относительно исходного положение. Например, так:

В отличие от свойства margin , значения которого вычисляются от ширины родительского элемента, transform: translate(X, Y) берет за основу габариты самого элемента — в данном случае, модального окна. А это то, что нам и нужно. В результате, модальное окно будет всегда находиться в центре. Независимо от своих размеров.

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

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

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

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

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

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

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

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

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

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

vertical-align — CSS — Дока

1. Кратко
2. Пример
3. Как понять
4. Как пишется
5. Подсказки
6. На практике
   1. Алёна Батицкая советует

Кратко

Скопировано

Свойство vertical-align выравнивает текстовые элементы по вертикали относительно друг друга.

🤖 Для простого текста это не особо актуально, то вот для строчно-блочных (inline-block) элементов это свойство может быть очень полезным.

Пример

Скопировано

Пусть у нас на странице есть три строчно-блочных элемента. Для объяснения работы свойства vertical-align они будут разной высоты:

<div>  <div></div>  <div></div>  <div></div></div>
          <div>
  <div></div>
  <div></div>
  <div></div>
</div>

. element {  display: inline-block;  width: 50px;  height: 50px;  background-color: white;}.medium {  height: 100px;}.big {  height: 150px;}
          .element {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: white;
}
.medium {
  height: 100px;
}
.big {
  height: 150px;
}

Открыть демо в новой вкладке

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

.element {  vertical-align: top;}
          .element {
  vertical-align: top;
}

Открыть демо в новой вкладке

Как понять

Скопировано

С английского языка словосочетание vertical align дословно переводится как вертикальное выравнивание. Что в точности совпадает с ожидаемым результатом от использования этого свойства.

Как пишется

Скопировано

Значение свойства vertical-align чаще всего задаётся при помощи ключевого слова. Единовременно можно указать лишь одно значение.

Рассмотрим доступные значения на примере с котиком 😍:

• baseline — значение по умолчанию. Выравниваемый элемент выстраивается по нижней линии текста. Если в родительском элементе нет текста, то элемент выравнивается по нижней границе.

Открыть демо в новой вкладке

• top — верхняя граница элемента находится на уровне верхней границы строки.

Открыть демо в новой вкладке

• middle — мысленно проведи две вертикальные линии: одну через центр текста, а вторую через центр котика. Текущее значение свойства сопоставляет эти линии. Таким образом элемент выравнивается по центру.

Открыть демо в новой вкладке

• bottom — выравнивает нижнюю границу элемента по уровню нижней границы строки.

Открыть демо в новой вкладке

• sub — удобное значение, если нужно создать нижний индекс. Например, в химических формулах: H₂O. Опускает базовую линию так, чтобы элемент опустился до уровня нижнего индекса:

Открыть демо в новой вкладке

• super — работает почти как sub, только поднимает базовую линию вверх.

Открыть демо в новой вкладке Открыть демо в новой вкладке Открыть демо в новой вкладке

Помимо ключевых слов можно использовать числовые значения.

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

Если указать числовое значение в процентах, то за 0% берётся нижняя граница текста без выносных элементов. То есть аналогично baseline. Процент рассчитывается от line-height родительского элемента.

Подсказки

Скопировано

💡 Свойство vertical-align применяется к элементам, которые нужно выровнять, а не к родительскому элементу.

💡 На всякий случай: вертикально — это сверху вниз. Слева направо — это горизонтально 😉

💡 Свойство очень пригождается когда нужно выровнять картинку или emoji относительно текста.

На практике

Скопировано

Алёна Батицкая советует

Скопировано

🛠 Свойство vertical-align каверзное. Многие начинающие разработчики пытаются применить его к родительскому элементу, по аналогии с text-align. И ничего не выходит. Просто запомни, что его нужно применять к тому элементу, который хочется выровнять.

🛠 С появлением флексбоксов выравнивание по вертикали производится при помощи align-items. Поэтому на свойство vertical-align стоит обратить внимание, только если работаешь с вёрсткой на строчно-блочных элементах.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

text-transform

alt + ←

→

@font-face

alt + →

Bootstrap Выравнивание по вертикали — примеры и руководство

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

Утилиты Flexbox для вертикального выравнивания.

Примечание: Для расширенного использования см. Документы Flexbox.

---

Как вертикально, так и горизонтально

Добавьте .d-flex к родительскому элементу, чтобы включить гибкий режим. Затем используйте (также на родительский элемент) .align-items-center для выравнивания содержимого по вертикали и .justify-content-center для выравнивания содержимого по горизонтали.

Показать код Изменить в песочнице

            
              <дел>
  Пример кнопки
              

            
              <дел>
                Пример кнопки