Существует не много способов расположения элемента вертикально по центру.
Лично я знал 2 (точнее 2.5, сейчас объясню), не считая position: absolute.
Первый способ — выравнивание с javascript. Не думаю, что для такой простой задачи стоит лишний раз нагружать браузер (задумайтесь о мобильных устройствах).
Второй способ — применение display: table-cell и vertical-align: middle, например.
В этом способе несколько минусов (хотя бы теперь нельзя корректно манипулировать шириной элемента или выровнять его по горизонтальному центру).
И два с половиной — использование строчно-блочных элементов (display: inline-block).
Мало кто замечал, но этот способ не совсем корректно работает.
Пример:
Думаю, сейчас вы сами догадаетесь. Добавим еще элементов.
Теперь ясно (тем, кто не знал этого), что строчно-блочные элементы выравниваются по высоте относительно самого высокого из сиблингов, а не по высоте их родителя. Досадно.
Лично у меня душе ближе всего лежит к «два с половиной».
И если бы он корректно работал было бы отлично. И манипулирование шириной тебе, и корректное применение остальных стилей, да и еще проще простого выставить по центру горизонтально.
Немного подумав пришло в голову довольно простое решение и у меня получилось уже готовое, полноценное «три».
Данный способ является довольно универсальным и работает во всех современных браузерах. Что касается IE7, Opera 9.2 и т.д., я не буду сейчас писать об их хаках (не об этом статья). Если, уж, больно надо — можно почитать об этом здесь и здесь.
Лично я знал 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 и т.д., я не буду сейчас писать об их хаках (не об этом статья). Если, уж, больно надо — можно почитать об этом здесь и здесь.