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

Leave a Comment / Html / By /

Вертикальное выравнивание в блоке CSS Flexbox

29.07.2022

1752

В закладки

Для того чтобы выровнять текст или дрогой inline-элемент по высоте родителя, можно применить CSS-свойства flexbox. Например, нужно выравнять текст в ссылках при следующей вёрстке:

<div>
	<div><a href="#">Быстрая доставка</a></div>
	<div><a href="#">Скидки клиентам, сезонные акции</a></div>
	<div><a href="#">Большой ассортимент товаров на любой кошелек</a></div>
	<div><a href="#">Гарантия от 1 года</a></div>
</div>

HTML

.list div {
	display: flex;
	align-items: center;    
	/* justify-content: center; */
	/* align-self: center; */
}

CSS

1

<div>
	<div><a href="#">Быстрая доставка</a></div>
	<div><a href="#">Скидки клиентам, сезонные акции</a></div>
	<div><a href="#">Большой ассортимент товаров на любой кошелек</a></div>
	<div><a href="#">Гарантия от 1 года</a></div>
</div>

HTML

. list {
	overflow: hidden;
}
.list div {
	width: 21%;
	float: left;
	margin: 0 2%;
	height: 90px;
	padding: 0 15px;
	box-sizing: border-box;        
	background: #eee;
	line-height: 18px;
	display: flex;
	align-items: center;
}

CSS

Результат:

2

<div>
	<div><a href="#">Быстрая доставка</a></div>
	<div><a href="#">Скидки клиентам, сезонные акции</a></div>
	<div><a href="#">Большой ассортимент товаров на любой кошелек</a></div>
	<div><a href="#">Гарантия от 1 года</a></div>
</div>

HTML

.list {
	overflow: hidden;
}
.list div {
	width: 21%;
	float: left;
	margin: 0 2%;
	height: 90px;
	background: #eee;
	line-height: 18px;
	padding: 0 15px;
	box-sizing: border-box;   
	display: flex;
	align-items: center;  
	justify-content: center;
	text-align: center; 
}

CSS

Результат:

3

<div>
	<div><a href="#">Быстрая доставка</a></div>
	<div><a href="#">Скидки клиентам, сезонные акции</a></div>
	<div><a href="#">Большой ассортимент товаров на любой кошелек</a></div>
	<div><a href="#">Гарантия от 1 года</a></div>
</div>

HTML

.
 
 list {
	overflow: hidden;
}
.list div {
	width: 21%;
	float: left;
	margin: 0 2%;
	height: 90px;
	background: #eee;
	line-height: 18px;
	padding: 0 15px;
	box-sizing: border-box;      
	display: flex;
	align-items: center;
	text-align: right;
}

CSS

Результат:

29.07.2022

1752

#CSS #HTML

В закладки

Другие публикации

Проверка орфографии в браузере

В современных браузерах как правило есть модуль проверки орфографии в полях input, textarea и элементов с contenteditable=true.

Стиль и размер ReCaptcha

Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно следующими способами:

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

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

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

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

Свойство 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. У нас есть сетка с изображениями и текстом — все они разной высоты, поэтому не везде текст выравнивается красиво:

<div> 
  <img src="http://placebacn.com/200/400"> 
  <h3>grilled bacon</h3> 
</div> 
<div> 
  <img src="http://placebacn.com/200/300"> 
  <h3>tasty bacon</h3> 
</div> 
<div> 
  <img src="http://placebacn.com/200/200"> 
  <h3>crispy bacon</h3> 
</div> 
<div> 
  <img src="http://placebacn.com/200/350"> 
  <h3>bacon</h3> 
</div>

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

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

<div> 
  <div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis
  aperiam quidem minima a qui ipsa deleniti nisi modi nesciunt
  dolores, consequatur dolorem, dignissimos debitis distinctio.
  Voluptas eligendi fuga voluptatem eos. 
  </div>
</div>

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

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

.container {
  position: relative;
  background: #444;
}
. box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 200px;
  margin: -100px 0 0 -200px;
  color: #fff;
  background: #cc3f85;
}

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

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

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

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

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

.container {
  height: 400px;
  margin: 20px;
  background: #444;
  font-size: 0;
  text-align: center;
}
.container:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
}
.box {
  display: inline-block;
  width: 50%;
  padding: 2em;
  border: 1px solid #000;
  background: #cc3f85;
  font-size: 1rem;
  vertical-align: middle;
}

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

МКМихаил Кузнецовавтор-переводчик статьи «Vertical-Alignment in CSS»

Свойство вертикального выравнивания CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

Вертикальное выравнивание изображения:

img. a {
  vertical-align: baseline;
}

img.b {
  вертикальное выравнивание: text-top;
}

изображение.с {
вертикальное выравнивание: текст внизу;
}

изображение д {
вертикальное выравнивание: суб;
}

img.e {
  вертикальное выравнивание: супер;
}

Попробуйте сами »

Определение и использование

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

Показать демо ❯

Значение по умолчанию: базовый уровень
Унаследовано: нет
Анимация: да. Читать о анимированном Попробуй
Версия: CSS1
Синтаксис JavaScript: объект .style.verticalAlign=»top» Попробуй

Поддержка браузера

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

Собственность
вертикальное выравнивание 1,0 4,0 1,0 1,0 4,0

Синтаксис CSS

vertical-align: baseline| длина |sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

Значения свойств

Значение Описание Демо
базовый уровень Элемент выровнен по базовой линии родителя. Это по умолчанию Демонстрация ❯
длина Поднимает или опускает элемент на указанную длину. Допускаются отрицательные значения. Читать о единицах длины Демонстрация ❯
% Поднимает или опускает элемент на процент от «высоты строки» свойство. Допускаются отрицательные значения Демонстрация ❯
суб Элемент выровнен по базовой линии нижнего индекса родительского элемента Демонстрация ❯
супер Элемент выровнен по базовой линии надстрочного индекса родительского элемента Демонстрация ❯
верх Элемент выровнен по верхнему краю самый высокий элемент на линии Демонстрация ❯
текст сверху Элемент выровнен по верху шрифт родительского элемента Демонстрация ❯
средний Элемент помещается в середину родительского элемента Демонстрация ❯
дно Элемент выровнен с самый нижний элемент в строке Демонстрация ❯
текст снизу Элемент выровнен с нижняя часть шрифта родительского элемента Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник CSS: Выравнивание текста CSS

Ссылка HTML DOM: свойство verticalAlign

❮ Предыдущий Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery 902 Tops

902 Reference Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

vertical-align · WebPlatform Docs

Резюме

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

Обзорная таблица

Исходное значение
базовый уровень
Относится к
встроенных элементов и элементов table-cell
Унаследовано
Нет
СМИ
визуальный

Расчетное значение
:

Анимация
Нет

Свойство объектной модели CSS
:

Проценты
относится к «высоте строки» самого элемента.

Синтаксис

  • вертикальное выравнивание: <длина>
  • вертикальное выравнивание: <процент>
  • вертикальное выравнивание: базовый уровень
  • выравнивание по вертикали: снизу
  • выравнивание по вертикали: посередине
  • выравнивание по вертикали: подчиненный
  • выравнивание по вертикали: супер
  • выравнивание по вертикали: текст по нижнему краю
  • выравнивание по вертикали: текст вверху
  • выравнивание по вертикали: сверху

Значения

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *