Выравнивание блоков по центру HTML/CSS.

← Назад в записки веб-программиста

Выравнивание блоков по центру HTML/CSS.

htmlcssблокиблочные элементыверсткапо центру

Есть несколько способов установить блочный элемент по центру родительского блока. Чтобы установить текст по центру, достаточно прописать родителю text-align:center; Блок по центру удается разместить в центре родителя с помощью значения margin: *px auto;, но как же быть, если блоков в родителе несколько.

Есть очень хороший способ установить блоки(именно блочные элементы div, p, li...) по центру. Нам поможет опять же text-align:center;

	.few{		width: 100%;		background: rgb(223, 223, 223);		padding: 20px;		text-align: center; /* установить строчный элемент по центру родительского блока */	}	.few div{		display button: inline-block; /* превращаем блочный элемент в строчный */		width: 120px;		background: rgb(112, 112, 112);	}		<div class="few">		<div>один</div>		<div>два</div>		<div>три</div>		<div>четыре</div>	</div>				
ДемоСмотреть демо

Идея заключается в следующем, блочные элементы, находящиеся в родителе, превращаем в строчные элементы с помощью display button: inline-block;, в то же время родителю указываем text-align: center;. Это очень часто приходится использовать для верстки меню, чтобы при добавлении еще одного пункта наше меню плавало и устанавливала пункты по центру.