Центр <ul><li> в div

Question

После некоторого поиска я не нашел правильного способа центрировать список <li> на фиксированной ширине div.

Взгляните на страницу ..Это тоже не работает!

Answer 1

Чтобы отцентрировать ul и , также центрируйте в нем элементы li и динамически изменить ширину ul, используйте display: inline-block; и заверните его в центрированную область.

<style type="text/css">
    .wrapper {
        text-align: center;
    }
    .wrapper ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        /* For IE, the outcast */
        zoom:1;
        *display: inline;
    }
    .wrapper li {
        float: left;
        padding: 2px 5px;
        border: 1px solid black;
    }
</style>

<div class="wrapper">
    <ul>
        <li>Three</li>
        <li>Blind</li>
        <li>Mice</li>
    </ul>
</div>

Обновление

Вот ссылка jsFiddle на код выше.

Answer 2

Поскольку элементы ul и li по умолчанию display: block - задайте им автоматические поля и ширину, меньшую, чем у их контейнера .

ul {
    width: 70%;
    margin: auto;
}

Если вы изменили их свойство display или сделали что-то, что переопределяет нормальные правила выравнивания (например, их изменение), это не сработает.

Answer 3

шагов:

1. Запись style="text-align:center;" в родительский div из ul
2. Запись style="display:inline-table;" в ul
3. Запись style="display:inline;" в li

или используйте

<div class="menu">
 <ul>
   <li>item 1 </li>
   <li>item 2 </li>
   <li>item 3 </li>
 </ul>
</div>

<style>
 .menu { text-align: center; }
 .menu ul { display:inline-table; }
 .menu li { display:inline; }
</style>

Answer 4

Я люблю flexbox:

ul {
  justify-content: center;
  display: flex;
}

Answer 5

Это лучший способ центрировать UL внутри любого DIV-контейнера.

Это решение CSS не использует свойства Width и Float. Float: Left и Width: 70%, это вызовет у вас головную боль, когда вам придется дублировать меню на разных страницах с разными пунктами меню.

Вместо использования ширины мы используем отступы и поля для определения пространства вокруг текста / элемента меню. Также вместо использования Float: Left в элементе LI используйте display: inline-block.

Перемещая ваш LI влево, вы буквально перемещаете свой контент влево, а затем вы должны использовать один из хаков, упомянутых выше, для центрирования вашего UL. Display: inline-block создает ваше свойство Float для вас (вроде). Он берет ваш элемент LI и превращает его в элемент блока, который лежит рядом друг с другом (не плавая).

При адаптивном дизайне и использовании таких платформ, как Bootstrap или Foundation, будут возникать проблемы при попытке размещения и центрирования контента. У них есть несколько встроенных классов, но всегда лучше делать это с нуля. Это решение намного лучше для динамических меню (таких как система меню Adobe Business Catalyst).

Ссылку на этот учебник можно найти по адресу: http://html -tuts.com / center-div-image-table-ul-inside-div /

HTML

<div class="container">
        <ul>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
        </ul>
    </div>

CSS

.container {
    text-align: center;
    border: 1px solid green;
}
.container ul {
    border: 2px solid red;
    display: inline-block;
    margin: 10px 0;
    padding: 2px;
}
.container li {
    display: inline-block;
}
.container li a {
    display: inline-block;
    background: #444;
    color: #FFF;
    padding: 5px;
    text-decoration: none;
}

Answer 6

Может быть либо

div ul
{
 width: [INSERT FIXED WIDTH]
 margin: 0 auto;
}

или

div li
{
text-align: center;
}

зависит от того, как оно должно выглядеть (или сочетать их)

Answer 7

Чтобы отцентрировать блочный объект (например, ul), вам нужно установить ширину на нем, а затем вы можете установить для этих полей слева и справа поля автоматически.

Чтобы центрировать встроенное содержимое объекта блока (например, встроенное содержимое li), вы можете установить свойство css text-align: center;.

Answer 8

Интересно, но попробуйте это с плавающими элементами li внутри ul: Пример здесь

Проблема сейчас: ul нуждается в фиксированной ширине, чтобы фактически сидеть в центре. Однако мы хотим, чтобы это было относительно ширины контейнера (или динамического значения), поле: 0 auto на ul не работает.

Лучший способ - отказаться от списка UL / Li и использовать другой подход пример здесь

Answer 9

Просто добавьте text-align: center; к вашему <ul>. Проблема решена.

Answer 10

Попробуйте

div#divID ul {margin:0 auto;}