Центрировать горизонтальный список стилей меню

Question

У меня есть следующий код:

CSS

#main
{
    width:100%;
    height:120px;
    border:solid 1px #efefef;
}

#links
{
    background-color:#808080;
}

#links ul
{
    margin:0px auto;
    padding:0px;
    list-style:none;
    background-color:#eee;
    height:30px;
}

#links ul li
{
    float:left;
    margin:0px;
    list-style:none;
    padding:0px 10px;
}

HTML

<div id="main">
    <div id="links">
        <ul>
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
            <li>Link 4</li>
            <li>Link 5</li>
            <li>Link 6</li>
        </ul>    
    </div>
</div>

Элементы списка являются динамическими, поэтому я не могу использовать фиксированную ширину на слое #links, и я хочу, чтобы список был идеально отцентрирован. Приведенный выше код не работает, и у меня есть несколько методов, но, кажется, не удается центрировать список.

Я не хочу использовать таблицу частично, потому что я ненавижу использовать таблицы для меню, и в конечном итоге у меня будут элементы подменю, которые также будут горизонтальными.

Есть указатели?

Спасибо Стив

Answer 1

Вот возможные решения:

• Поплавки по центру без ширины
• Центрирование плавающего меню слева

Answer 2

Маржа 0 авто работает только когда вы даете ширину!вам нужно использовать встроенный блок, затем выравнивание текста по центру

ul {
    text-align: center;        
}
ul > li {
    display: inline-block;
}

Answer 3

Небольшая деталь в стиле ответа Safraz (спасибо, что это сработало и для меня!)

Когда я установил left:% 50 ul, а left: -50% li элементов.Браузер показывает горизонтальную полосу прокрутки, хотя там ничего не видно (полоса прокрутки есть из-за переполнения, создаваемого UL с оставшимися 50%), поэтому решение заключается в добавлении в div обтекания (в этом случае id =ссылки) этот стиль:

CSS

#links
{
    /* .... */
    overflow-x: hidden ;
}

Answer 4

Вот что я написал, что может делать то, что вы хотите.Хотя использует jQuery. Равномерно расположенное и выровненное горизонтальное меню списка

Answer 5

Добавить:

text-align:center;

К #links

#links ul устанавливает для левого и правого поля значение auto.Который сделает их равными по размеру, если контейнеру будет сказано центрировать его содержимое.Строка выше сделает это.