Як я можу відцентрувати <ul> <li> у div

Як я можу відцентрувати невпорядкований список <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>

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

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

Якщо ви змінили їх властивість відображення або зробили щось, що замінює звичайні правила вирівнювання (наприклад, плаваючі), це не буде працювати.

Для центрування 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 на код вище.

Я люблю флексбокс:

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

Кроки:

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>

Це кращий спосіб відцентрувати UL всередині будь-якого контейнера DIV.

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

Замість того, щоб використовувати ширину, ми використовуємо відступи та поля для визначення простору навколо тексту / пункту меню. Крім того, замість використання Float: Left в елементі LI, використовуйте display: inline-block.

Плаваючи LI ліворуч, ви буквально переміщаєте вміст ліворуч, а потім ви повинні використовувати один із згаданих вище хаків, щоб відцентрувати UL. Відображення: вбудований блок створює для вас властивість 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;
}

Може бути

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

або

div li
{
text-align: center;
}

залежить від того, як він повинен виглядати (або поєднуючи їх)

Для центрування об'єкта блоку (наприклад ul ) потрібно встановити на ньому ширину, а потім ви можете встановити для лівих та правих полів об'єктів значення авто.

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

Спробуйте

div#divID ul {margin:0 auto;}

Просто додайте text-align: center;до свого <ul>. Проблема вирішена.

Цікаво, але спробуйте це з плаваючими елементами li всередині ul: Приклад тут

Проблема зараз: ul потребує фіксованої ширини, щоб фактично сидіти в центрі. Однак ми хочемо, щоб це було відносно ширини контейнера (або динамічного), margin: 0 auto на ul не працює.

Кращий спосіб - відпустити список UL / Li та використати тут інший приклад підходу

Якщо ви знаєте ширину 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;
  }

Ось рішення, яке я міг знайти:

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

Інший варіант:

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

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

Найближчий збіг - це відповідь, але він повинен відрегулювати зміну ширини за допомогою відступів

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

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

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

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

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

використовувати теги олдскульного центру

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

:-)