css - 在不设置宽度的情况下使 div 居中

Question

有没有办法做到这一点？当使用可以经常更改元素数量的导航时，最好不必计算和更新 css，而只要有一个可行的解决方案。

如果那是不可能的(我假设是)，谁能告诉我一个可以做到这一点的 javascript？

---

编辑

回复:提供代码一些代码基本上我正在使用我认为最典型的设置

<div class="main">
 <div class="nav">
  <ul>
   <li>short title</li>
   <li>Item 3 Long title</li>
   <li>Item 4 Long title</li>
   <li>Item 5 Long title</li>
   <li>Item 6 Extra Long title</li>
  </ul>
 </div>
</div>

---

编辑

.main {
 width:100%;
 text-align:center;
}
.nav {
 margin:0 auto;
}
.nav ul li {
 display:inline;
 text-align:left;
}

我发现这个/这些解决方案的问题是内容被推到右边添加一些右填充(40px)似乎可以在我正在检查的浏览器中解决这个问题(O FF IE)。 导航{ margin :0 自动； 填充右:40px； }我不知道这个值是从哪里来的，也不知道为什么 40px 解决了这个问题。

有人知道这是从哪里来的吗？它不是边距或填充，但无论我做什么，第一个大约 40px 都不能用于放置。可能是 ul 或 li 添加了这个。

我看过 display:table-cell 的实现方式，但 IE 的复杂性仍然与其他解决方案存在相同的问题

---

编辑(最终)

好的，我已经尝试了一些关于缩进的方法。我已将所有填充重置为 0

*{padding:0;}

修复了它，我不需要偏移填充(我想我会保留我的整个过程，这样如果有人遇到这个，它会节省他们一些时间)

感谢评论和回复

Answer 1

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

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

就这样吧

改变 li 的数量，但 ul 总是居中对齐

使用 class="nav"制作 div将 ul 放入其中，ul 将始终居中对齐