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

Question

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

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

Answer 1

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

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

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

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

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

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

Answer 2

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

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 3

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

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

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

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

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

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

: -)