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

Я пытаюсь центрировать <ul> внутри a <div>. Я попробовал следующее

text-align: center;

и

left: 50%;

Это не работает.

CSS

.container { 
    clear: both; 
    width: 800px; 
    height: 70px; 
    margin-bottom: 10px;
    text-align: center;
}

.container ul { 
    padding: 0 0 0 20px; 
    margin: 0; 
    list-style: none;
}

.container ul li { 
    margin: 0; 
    padding: 0; 
}

Я хочу, чтобы ul был центрирован внутри контейнера.

ОТВЕТЫ

Ответ 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;
}