Подтвердить что ты не робот

Горизонтальное центрирование элементов многострочного списка в неупорядоченном списке

У меня есть неупорядоченный список, который переносится на вторую строку и должен быть расположен по горизонтали внутри содержащего UL. Каждый LI представляет собой заданную ширину и высоту. Я видел много подходов, которые работают для одной строки, но ничего, что я пробовал, работает, когда список обертывается во вторую строку. Было бы идеально, если бы это работало в IE7 + - Спасибо за помощь.

См. здесь иллюстрацию:

illustrationhttp://grab.by/8UIl

4b9b3361

Ответ 1

Вот лучший способ, который я мог найти.

ul li { 
    /* make list elements fall inline as block elements */
    position: relative;
    display: inline-block;
    /* next two lines only for display purposes */
    text-align: center;
    border:1px solid red;
}
/* horizontally center ul element */
ul { text-align:center; }

См. ссылку для примера: http://jsfiddle.net/gfkPG/