Как я могу центрировать <ul> <li> в div

Question 1

Как я могу центрировать неупорядоченный список <li>в фиксированной ширине div?

<table width="100%">
  <tbody>
  <tr>
    <td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td>
    <td width="59%"><p align="left">&nbsp;</p>
      <h1 align="left">StudioTeknik.com</h1>
      <p><br align="left">
        <strong>Marc-André Ménard</strong></p>
      <ul>
        <li>Photographie digitale</li>
        <li>Infographie </li>
        <li>Débug et IT (MAC et PC)</li>
        <li> Retouche </li>
        <li>Site internet</li>
        <li>Graphisme</li>
      </ul>
      <p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span><a href="#">+41 079 573 48 99</a></p>
      <p align="left"><strong class="style1">Skype : </strong> <a href="#">menardmam</a></p>
    <p align="left"><strong class="style1">Courriel :</strong><a href="https://web.archive.org/web/20100104192317/mailto:menardmam@hotmail.com">    info@studioteknik.com</a></p></td>
  </tr>
  </tbody>
</table>

Развернуть фрагмент

Question 2

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

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

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

Question 3

Чтобы центрировать 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 на приведенный выше код.

Question 4

Мне нравится flexbox:

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

Question 5

Шаги:

Написать style="text-align:center;"родитель divизul
Напишите style="display:inline-table;"вul
Напишите 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>

Question 6

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

Question 7

Может быть

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

или

div li
{
text-align: center;
}

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

Question 8

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

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

Question 9

Пытаться

div#divID ul {margin:0 auto;}

Question 10

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

Question 11

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

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

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

Question 12

Если вы знаете ширину, 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;
  }

Question 13

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

#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;
}

Question 14

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

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;
}

Question 15

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

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

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

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

Смотрите результат ниже, все расстояния между ними <li>и <ul>коробкой такие же.

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

Question 16

<div id="container">
  <table width="100%" height="100%">
    <tr>
      <td align="center" valign="middle">
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>
      </td>
    </tr>
  </table>
</div>

Question 17

использовать oldschool center-tags

<div> <center> <ul> <li>...</li> </ul></center> </div>

:-)

Answer 1

Как я могу центрировать неупорядоченный список <li>в фиксированной ширине div?

<table width="100%">
  <tbody>
  <tr>
    <td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td>
    <td width="59%"><p align="left">&nbsp;</p>
      <h1 align="left">StudioTeknik.com</h1>
      <p><br align="left">
        <strong>Marc-André Ménard</strong></p>
      <ul>
        <li>Photographie digitale</li>
        <li>Infographie </li>
        <li>Débug et IT (MAC et PC)</li>
        <li> Retouche </li>
        <li>Site internet</li>
        <li>Graphisme</li>
      </ul>
      <p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span><a href="#">+41 079 573 48 99</a></p>
      <p align="left"><strong class="style1">Skype : </strong> <a href="#">menardmam</a></p>
    <p align="left"><strong class="style1">Courriel :</strong><a href="https://web.archive.org/web/20100104192317/mailto:menardmam@hotmail.com">    info@studioteknik.com</a></p></td>
  </tr>
  </tbody>
</table>

Развернуть фрагмент

Answer 2

140

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

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

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

Квентин
источник

4

если это вас не радует, возможно, это произойдет: stackoverflow.com/questions/2865380/…

Bruiser

10

Ширина установки: авто; и отображение: встроенный блок; позволит вашему ul вести себя как строка текста. Затем вы можете использовать text-align: center; на родительском элементе. Это также позволит вашему ul увеличиваться и уменьшаться по мере изменения внутреннего содержимого, в отличие от фиксированной ширины.

i_a 07

@Chetabahana - Вы смотрите на текст, а не на элемент: jsfiddle.net/qwbexxog/3

Квентин

не работает нормально со всеми разрешениями, flex center работает

Srinivas08

Answer 3

4

если это вас не радует, возможно, это произойдет: stackoverflow.com/questions/2865380/…

Bruiser

Answer 4

10

Ширина установки: авто; и отображение: встроенный блок; позволит вашему ul вести себя как строка текста. Затем вы можете использовать text-align: center; на родительском элементе. Это также позволит вашему ul увеличиваться и уменьшаться по мере изменения внутреннего содержимого, в отличие от фиксированной ширины.

i_a 07

Answer 5

@Chetabahana - Вы смотрите на текст, а не на элемент: jsfiddle.net/qwbexxog/3

Квентин

Answer 6

не работает нормально со всеми разрешениями, flex center работает

Srinivas08

Answer 7

Чтобы центрировать 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 на приведенный выше код.

Answer 8

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

Арам Кочарян

Answer 9

Я использовал это для навигации Bootstrap 3, и мне нужно было добавить float: none;в ul.

Дилан Валад

Answer 10

36

Мне нравится flexbox:

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

Кристиан Майкл
источник

Answer 11

24

Шаги:

Написать style="text-align:center;"родитель divизul
Напишите style="display:inline-table;"вul
Напишите 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>

Дашрат
источник

Мы должны добавить маржу, иначе они вложены друг в друга, проверьте здесь jsfiddle.net/qwbexxog/4

Chetabahana

Этот ответ меня спас!

Хуан,

Answer 12

Мы должны добавить маржу, иначе они вложены друг в друга, проверьте здесь jsfiddle.net/qwbexxog/4

Chetabahana

Answer 13

Этот ответ меня спас!

Хуан,

Answer 14

Это лучший способ центрировать 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 15

6

Может быть

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

или

div li
{
text-align: center;
}

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

FP
источник

2

Последний вариант не центрирует элементы списка, а только их встроенное содержимое.

Квентин

Тем не менее, если <li>они не стилизованы, это выглядит так же.

FP

Answer 16

2

Последний вариант не центрирует элементы списка, а только их встроенное содержимое.

Квентин

Answer 17

Тем не менее, если <li>они не стилизованы, это выглядит так же.

FP

Answer 18

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

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

Answer 19

1

Пытаться

div#divID ul {margin:0 auto;}

Кейр
источник

Answer 20

1

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

Джонни Хейнс
источник

Answer 21

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

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

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

Answer 22

Если вы знаете ширину, 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;
  }

Answer 23

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

#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;
}

Answer 24

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

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;
}

Answer 25

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

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

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

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

Смотрите результат ниже, все расстояния между ними <li>и <ul>коробкой такие же.

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

Answer 26

<div id="container">
  <table width="100%" height="100%">
    <tr>
      <td align="center" valign="middle">
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>
      </td>
    </tr>
  </table>
</div>

Answer 27

-4

использовать oldschool center-tags

<div> <center> <ul> <li>...</li> </ul></center> </div>

:-)

Justastefan
источник

Вам следует избегать использования выражений типа стиля в коде разметки. Вот для чего был создан CSS!

FP

1

Работоспособно, но учтите, что: «Этот centerэлемент устарел в HTML 4.01 и не поддерживается в XHTML 1.0 Strict DTD» из w3schools.com/TAGS/tag_center.asp

okw

4

вздох W3Schools, как обычно, предоставляет неполную, неверную информацию. Он устарел в 4.0, а не в 4.01, и не появляется ни в одном из вариантов Strict (выделение XHTML 1.0 - странный выбор).

Квентин

Как упоминалось ранее, они устарели в HTML 4.01 ... также это просто плохая практика ...

Джонни Хейнс,

2

Да, он не должен использовать такой тег, но это не повод для отрицательного ответа. Иногда нам нужно самое верное решение. И для меня этот ответ положительный.

workdreamer

Answer 28

Вам следует избегать использования выражений типа стиля в коде разметки. Вот для чего был создан CSS!

FP

Answer 29

1

Работоспособно, но учтите, что: «Этот centerэлемент устарел в HTML 4.01 и не поддерживается в XHTML 1.0 Strict DTD» из w3schools.com/TAGS/tag_center.asp

okw

Answer 30

4

вздох W3Schools, как обычно, предоставляет неполную, неверную информацию. Он устарел в 4.0, а не в 4.01, и не появляется ни в одном из вариантов Strict (выделение XHTML 1.0 - странный выбор).

Квентин

Answer 31

Как упоминалось ранее, они устарели в HTML 4.01 ... также это просто плохая практика ...

Джонни Хейнс,

Answer 32

2

Да, он не должен использовать такой тег, но это не повод для отрицательного ответа. Иногда нам нужно самое верное решение. И для меня этот ответ положительный.

workdreamer

Как я могу центрировать <ul> <li> в div

Ответы: