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

Question

Мне нужно расположить по центру CSS-меню, которое имеет неизвестную ширину.Я нашел решение.Установив для тега UL значение display: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>.Надеюсь, это поможет.