it-swarm.com.ru

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

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

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

76
menardmam

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

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

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

122
Quentin

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

<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 на код выше.

152
Aram Kocharyan

Шаги:

  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>
20
Dashrath

Это лучший способ центрировать 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;
}
8
DSA Web Specialists

Я люблю flexbox:

ul {
  justify-content: center;
  display: flex;
}
8
Christian Michael

Может ли быть

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

или же

div li
{
text-align: center;
}

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

5
Florian Peschka

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

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

2
anddoutoi

Пытаться 

div#divID ul {margin:0 auto;}
1
Keir

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

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

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

1
Plippie

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

1
Jonny Haynes

Я искал тот же случай и попробовал все ответы, изменив ширину <li>.
К сожалению, все не смогли получить одинаковое расстояние слева и справа от поля <ul>

Самое близкое совпадение: этот ответ , но для этого необходимо отрегулировать изменение ширины с отступом

.container ul {
    ...
    padding: 10px 25px;
}

.container li {
  ...
  width: 100px;
}

Смотрите результат ниже, все расстояния между <li> и <ul> одинаковы.  enter image description here

Вы можете проверить это на jsFiddle:
http://jsfiddle.net/qwbexxog/14/

0
Chetabahana

Вот решение, которое я мог найти:

#wrapper {
  float:right;
  position:relative;
  left:-50%;
  text-align:left;
}
#wrapper ul {
  list-style:none;
  position:relative;
  left:50%;
}

#wrapper li{
  float:left;
  position:relative;
}
0
iMad

Если вы знаете ширину ul, тогда вы можете просто установить поле ul равным 0 auto;

Это выровняет ul в середине содержащего div

Пример:

HTML:

<div id="container">
 <ul>
  <li>Item1</li>
  <li>Item2</li>
 </ul>
<div>

CSS:

  #container ul{
    width:300px;
    margin:0 auto;
  }
0
Jamie Dixon

Другой вариант:

HTML

<nav>
  <ul class = "main-nav"> 
   <li> Productos </li>
   <li> Catalogo </li>
   <li> Contact </li>  
   <li> Us </li>
  </ul>
</nav>    

CSS:

nav {
  text-align: center;
}

nav .main-nav li {
  float: left;
  width: 20%;
  margin-right: 5%;
  font-size: 36px;
  text-align: center;
}
0
Trapo