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

29.07.2022

5453

Для того чтобы выровнять текст или дрогой 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