Центрирование нескольких блочных элементов
Кросс-браузерный способ для многострочного центрирования неизвестного количества блочных элементов
Работая над одним проектом, мне пришлось столкнуться с одной неприятной задачей: отцентрировать многострочный список (то есть один <ul>, много <li>) так, чтобы элементы списка (неизвестное количество, неизвестная ширина, одинаковая высота) были отцентрированы в каждой строчке:
Как обычно, Google is your friend. Но, увы и ах, задача хорошо решается только для однострочных контейнеров (то есть в случае, если центрируемые элементы будут находиться на одной строке). Одно из таких решений представлено здесь.
Общая идея решения:
float: left;
position: relative;
left: 50%;
}
#container ul {
list-style: none;
position: relative;
left: -50%;
}
#container li {
float: left;
position: relative; /* For IE */
}
/* IE Mac only styles \*//*/
#container {
float: none;
position: static;
}
#container ul {
position:static;
text-align: center;
}
#container li {
float: none;
position: static;
display: inline-block;
}
/* End of IE Mac styles */
<ul>
<li>Item 1</li>
<li>Long Item 2</li>
<li>Very Long Item 3</li>
</ul>
</div>
Второй способ более изощрённый (оттуда же):
list-style: none;
margin: 0 auto;
padding: 0;
display: table;
white-space: nowrap;
}
.navcentre li {
display: table-cell;
}
.navcentre ul { display: inline-block; }
.navcentre ul { display: inline; }
.navcentre li { display: inline-block; }
.navcentre li { display: inline; }
.navcentre { text-align: center; }
<ul>
<li>Item 1</li>
<li>Long Item 2</li>
<li>Very Long Item 3</li>
</ul>
</div>
Особое внимание следует обратить на этот хак:
element { display: inline; }
Магия здесь в следующем:
IE only understandsdisplay:inline-blockon inline elements but fortunately if you first make the block level elementdisplay:inline-blockand then declare it asdisplay:inlinein the next style block it now treats the block level element asdisplay:inine-block. This is consistent in ie7 so we are safe for years to come.
Третий вариант предложен Stu Nichols, но у него (варианта) есть один серьёзный недостаток: "a centered floated left menu (unknown width)" в IE7, мягко говоря, не работает.
Итак, с однострочниками разобрались. Переходим к многострочникам.
На том же сайте я нашёл еще одну интересную статью: Center Multiple Divs (IE5.5 - 7 only). То, что нужно, но вот беда: работает только для IE. Плохо. Но идея замечательная:
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
li {
display: inline-block;
padding: 5px;
margin: 5px;
}
li {
display: inline;
}
<li>Item 1</li>
<li>I am Item 2</li>
<li>This is Item 3</li>
<li>Very long Item 4</li>
<li>Very very very long Item 5 etc</li>
</ul>
Работает в IE6/7, Opera 9, Safari… Только в FireFox и других Gecko-based браузерах не работает из-за кривой поддержки display: inline-block. Таким образом, всё, что нужно — найти замену inline-block для Mozilla. И здесь мне очень пригодился прошлый опыт работы с XUL: я помню, что Mozilla поддерживает очень много разных значений для display, которые применяются в XUL (но могут применяться и в XHTML, правда, возможны побочные эффекты). Полный список Мозилловских расширений для display можно найти здесь. Там же сказано, что Mozilla не поддерживает -moz-inline-block (и, как следствие, inline-block, ибо разработчики проводят испытания, как правило, на -moz-xxx). Но есть замечательное значение -moz-inline-box (не путать с -moz-inline-block). Путём многочисленных экспериментов (так как с документацией проблемы) было установлено, что -moz-inline-box делает (инлайновый) элемент блочным, который будет вести себя как инлайновый (кому интересна разница с inline-block, читайте спецификации W3C CSS 2.1 
). Патчим стили и получаем то, что нужно:
display: -moz-inline-box;
}
li {
display: inline-block; /* Для Оперы, Сафари и семейства Ишаков. Mozilla не понимает inline-block, поэтому для нее display останется -moz-inline-box */
}
* html li {
display: inline; /* Для IE6 */
}
*:first-child+html li {
display: inline; /* Для IE7 */
}
Тестовая страница с ужасной разметкой и расцветкой
Как это все смотрится в других браузерах (еще можно посмотреть здесь):
Update: ура, это даже кому-то помогло: Смещение позиции cpanel. Вот и первая обратка с "Форума русской поддержки Joomla! CMS"
[...] метод центрования колнок внутри контейнера описан здесь. [...]