Как горизонтально выровнять ul до центра div?

Ответ 1

IE7 +: max-width: 660px и margin: auto

Вы можете центрировать элемент уровня блока, назначив фиксированную ширину, а margin-right и -left установить auto.

.container ul {
    /* for IE below version 7 use `width` instead of `max-width` */
    max-width: 660px;
    margin-right: auto;
    margin-left: auto;
}

Примечания

• Не требуется контейнер
• Требуется ширина или максимальная ширина элемента до центра, который должен быть известен 👎

IE8 +: display: inline-block и text-align: center

Также возможно центрирование элемента, как и обычного текста. Недостаток: вам нужно назначать значения как контейнеру, так и самому элементу.

.container {
    text-align: center;
}

.container ul {
    display: inline-block;

    /* One most likely needs to realign flow content */
    text-align: initial;
}

Примечания:

• Не требуется указывать определенную ширину 👍
• Требуется контейнер 👎
• Выравнивает содержимое потока в центр (потенциально нежелательный побочный эффект) 👎
• Работает хорошо с динамическим количеством пунктов меню (т.е. в тех случаях, когда вы не знаете ширины, которую занимает один элемент) 👍

IE8 +: display: table и margin: auto

Как и первое решение, вы используете автоматические значения для полей справа и слева, но не назначаете ширину. Если вам не нужна поддержка IE7 и ниже, это лучше подходит, хотя для типа table для display кажется неловко использовать значение свойства display.

.container ul {
    display: table;
    margin-right: auto;
    margin-left: auto;
}

IE9 +: transform: translatex(-50%) и left: 50%

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

.container {
    position: relative;
}

.container ul {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

Примечания

• Как всегда, при использовании абсолютного позиционирования центрированный элемент будет удален из потока документов. Все элементы будут заботиться только о контейнере, но игнорировать сам центрированный элемент. 👎👎👎
• Требуется контейнер 👎
• Этот метод позволяет легко вертикально центрировать, используя top вместо left и translateY() вместо translateX(). Также объединяется top и left с translate() (обратите внимание на отсутствующие X и Y) 👍
• Отметьте caniuse.com для поддержки браузера, потому что здесь может потребоваться префикс для Android-браузеров и/или iOS-браузеров (и IE9).

Режущий край: display: flex

.container {
    display: flex;
    justify-content: center;
}

Примечания

• Это не хак 👍👍👍
• Требуется контейнер 👎
• Поддержка браузера неплоха, но имеет несколько заметных отверстий, особенно Internet Explorer до версии 11 и некоторых старых Android и Safari ( macOS и iOS)

Наконец, demo, в котором суммируются все вышеприведенные решения.

Ответ 2

Сделайте левое и правое поля вашего автомата UL и присвойте ему ширину:

#headermenu ul {
    margin: 0 auto;
    width: 620px;
}

Изменить:. Как предположил kleinfreund, вы также можете центрировать выравнивание контейнера и отобразить ul на встроенном блоке, но вам также нужно предоставить LI либо левый поплавок, либо встроенный дисплей.

#headermenu { 
    text-align: center;
}
#headermenu ul { 
    display: inline-block;
}
#headermenu ul li {
    float: left; /* or display: inline; */
}

Ответ 3

ul {
width: 90%; 
    list-style-type:none;
    margin:auto;
    padding:0;
    position:relative;
    left:5%;
}

Ответ 4

Вы можете проверить это, решив вашу проблему...

    #headermenu ul{ 
        text-align: center;
    }
    #headermenu li { 
list-style-type: none;
        display: inline-block;
    }
    #headermenu ul li a{
        float: left;
    }

http://jsfiddle.net/thirtydot/VCZgW/

Ответ 5

Вы можете быстро и легко центрировать ul с помощью CSS Flexbox.

#headermenu {
    display: flex;
    justify-content: center; /* center ul horizontally */
    align-items: center; /* center ul vertically (if necessary) */ 
    width: 800px; 
    height: 70px; 
    margin-bottom: 10px;
}