Центрировать элементы LI в меню CSS в IE?

Question

Мне нужно центрировать меню CSS с неизвестной шириной. Я нашел решение. Установив тег UL для отображения:table или display:inline-table, элементы LI можно выровнять по центру.

Это решение не работает в IE. Есть ли другое решение, которое будет работать в IE, только с HTML / CSS?

Если вы хотите посмотреть мой код, я вставил его сюда.

Answer 1

Как насчет этого? У меня работает на IE6, IE7, Firefox.

Разметка:

<div id='menu-centered'>
    <ul>
        <li><a href="">My first item</a></li>
        <li><a href="">My second item</a></li>
        <li><a href="">My third item</a></li>
        <li><a href="">My fourth item</a></li>
        <li><a href="">My fifth item</a></li>
    </ul>
</div>

CSS:

#menu-centered {
    background-color: #0075B8;
    padding: 10px;
    margin: 0;
}

#menu-centered ul {
    text-align: center;
    padding: 0;
    margin: 0;
}

#menu-centered li {
    display: inline;
    list-style: none;
    padding: 10px 5px 10px 5px;
}

#menu-centered a {
    font: normal 12px Arial;
    color: #fff;
    text-decoration: none;
    padding: 5px;
    background: #57a8d6;
}

#menu-centered a:hover {
    background: #5fb8eb;
}

Ключ ко всему этому в основном делал text-align: center; на <ul> элемент. Вы также никогда не хотите делать такие вещи, как display: table; - это просто хакерство и, как вы узнали, работает не во всех браузерах. Так как этот способ позволяет избежать плавания, вам также не нужно иметь элемент clear, хотя вы могли бы удалить его в любом случае, добавив overflow: auto; к <ul>, Надеюсь, поможет.