Pull to refresh

Новый способ выравнивания элемента по цетру

Существует не много способов расположения элемента вертикально по центру.
Лично я знал 2 (точнее 2.5, сейчас объясню), не считая position: absolute.

Первый способ — выравнивание с javascript. Не думаю, что для такой простой задачи стоит лишний раз нагружать браузер (задумайтесь о мобильных устройствах).

Второй способ — применение display: table-cell и vertical-align: middle, например.
В этом способе несколько минусов (хотя бы теперь нельзя корректно манипулировать шириной элемента или выровнять его по горизонтальному центру).

И два с половиной — использование строчно-блочных элементов (display: inline-block).
Мало кто замечал, но этот способ не совсем корректно работает.

Пример:

ul {
	padding: 0;
	margin: 0;
	list-style: none;
	background: #767676;
	text-align: center;
	height: 600px;
	display: block; /* добавляем блочность, если необходимо */
	font-size: 0; /* убираем нежелательные отсутпы у дочерних элементов */
}

li {
	background: #ccc;
	padding: 10px;
	margin: 0 20px;
	font-size: 16px; /* возвращаем размер шрифта */
	display: inline-block; /* позволяем vertical-align выравнивать себя по вертикали */
	vertical-align: middle; /* и выравниваем */
}


<ul>
	<li><img src="1.png" alt="" /></li>  
</ul>


И где же?

Совсем не по центру

Думаю, сейчас вы сами догадаетесь. Добавим еще элементов.

<ul>
	<li><img src="1.png" alt="" /></li>
	<li><img src="2.png" alt="" /></li>
	<li><img src="3.png" alt="" /></li>    
</ul>


Уже лучше

Теперь ясно (тем, кто не знал этого), что строчно-блочные элементы выравниваются по высоте относительно самого высокого из сиблингов, а не по высоте их родителя. Досадно.

Какой же способ выбрать?

Лично у меня душе ближе всего лежит к «два с половиной».

И если бы он корректно работал было бы отлично. И манипулирование шириной тебе, и корректное применение остальных стилей, да и еще проще простого выставить по центру горизонтально.

Немного подумав пришло в голову довольно простое решение и у меня получилось уже готовое, полноценное «три».

ul {
	padding: 0;
	margin: 0;
	list-style: none;
	background: #767676;
	text-align: center;
	height: 600px;
	display: block; /* добавляем блочность, если необходимо */
	font-size: 0; /* убираем нежелательные отсутпы у дочерних элементов */
}

ul:before {
	content:''; /* и */
	height: 100%; /* вот */
	display: inline-block; /* оно! */
}

li {
	background: #ccc;
	padding: 10px;
	margin: 0 20px;
	font-size: 16px; /* возвращаем размер шрифта */
	display: inline-block; /* позволяем vertical-align выравнивать себя по вертикали */
}

ul:before, li {
	vertical-align: middle; /* еще вот */
}


Какая красота!

То, что надо

Данный способ является довольно универсальным и работает во всех современных браузерах. Что касается IE7, Opera 9.2 и т.д., я не буду сейчас писать об их хаках (не об этом статья). Если, уж, больно надо — можно почитать об этом здесь и здесь.
Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.