Центрирование нескольких блочных элементов

Кросс-браузерный способ для многострочного центрирования неизвестного количества блочных элементов

Работая над одним проектом, мне пришлось столкнуться с одной неприятной задачей: отцентрировать многострочный список (то есть один <ul>, много <li>) так, чтобы элементы списка (неизвестное количество, неизвестная ширина, одинаковая высота) были отцентрированы в каждой строчке:

Как обычно, Google is your friend. Но, увы и ах, задача хорошо решается только для однострочных контейнеров (то есть в случае, если центрируемые элементы будут находиться на одной строке). Одно из таких решений представлено здесь.

Общая идея решения:

[-]

View Code CSS

#container {
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 */

[-]

View Code HTML

Второй способ более изощрённый (оттуда же):

[-]

View Code CSS

.navcentre ul {
list-style: none;
margin: 0 auto;
padding: 0;
display: table;
white-space: nowrap;
}

.navcentre li {
display: table-cell;
}

[-]

View Code CSS

/* Эти стили только для IE */
.navcentre ul { display: inline-block; }
.navcentre ul { display: inline; }
.navcentre li { display: inline-block; }
.navcentre li { display: inline; }
.navcentre { text-align: center; }

[-]

View Code HTML

Особое внимание следует обратить на этот хак:

[-]

View Code CSS

element { display: inline-block; }
element { display: inline; }

Магия здесь в следующем:

IE only understands display:inline-block on inline elements but fortunately if you first make the block level element display:inline-block and then declare it as display:inline in the next style block it now treats the block level element as display: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. Плохо. Но идея замечательная:

[-]

View Code CSS

ul {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}

li {
display: inline-block;
padding: 5px;
margin: 5px;
}

li {
display: inline;
}

[-]

View Code HTML

Работает в 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 ). Патчим стили и получаем то, что нужно:

[-]

View Code CSS

li {
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 */
}

Тестовая страница с ужасной разметкой и расцветкой

Как это все смотрится в других браузерах (еще можно посмотреть здесь):