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

Работая над одним проектом, мне пришлось столкнуться с одной неприятной задачей: отцентрировать многострочный список (то есть один <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
<div id="container">
    <ul>
        <li>Item 1</li>
        <li>Long Item 2</li>
        <li>Very Long Item 3</li>
    </ul>
</div>

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

[-]
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
<div class="navcentre">
    <ul>
        <li>Item 1</li>
        <li>Long Item 2</li>
        <li>Very Long Item 3</li>
    </ul>
</div>

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

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

[-]
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 */
}

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

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

Update: ура, это даже кому-то помогло: Смещение позиции cpanel. Вот и первая обратка с "Форума русской поддержки Joomla! CMS" :-)

Добавить в закладки

Связанные записи

10
Март
2008

Комментарии к статье «Центрирование нескольких блочных элементов» (1)  »

  1. [...] метод центрования колнок внутри контейнера описан здесь. [...]

Подписаться на RSS-ленту комментариев к статье «Центрирование нескольких блочных элементов» Trackback URL: http://blog.sjinks.org.ua/css/7-center-multiple-block-elements/trackback/

Оставить комментарий к записи «Центрирование нескольких блочных элементов»

Вы можете использовать данные тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Оставляя комментарий, Вы выражаете своё согласие с Правилами комментирования.

Подписаться, не комментируя