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

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

<div class="list">
	<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
<div class="list">
	<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

Результат:

<div class="list">
	<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

Результат:

<div class="list">
	<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
949

Комментарии

, чтобы добавить комментарий.

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

Кривое подчёркивание ссылок в Google Chrome
Начиная с версии 64 Chrome начал добавлять разрывы в подчеркивании у ссылок, связано это с введением нового CSS...
4270
+2
Проверка орфографии в браузере
В современных браузерах как правило есть модуль проверки орфографии в полях input, textarea и элементов с contenteditable=true.
941
0
Ссылки на мессенджеры с сайта
HTML ссылки для открытия чата и других функций популярных мессенджеров.
18731
+13
Стиль и размер ReCaptcha
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно следующими способами:
18410
+3
Добавление CSS стилей на страницу
Несколько примеров как добавить CSS-свойства к HTML странице.
3496
+2
СSS стили для горизонтальных линий
Сборник горизонтальных линий с тегом hr разных видов и стилей.
91009
+9