Question

有办法做到这一点吗？当使用可以经常更改项目数量的导航时，不必计算with和更新css就好了，但只需要一个有效的解决方案。

如果这是不可能的（我假设是），任何人都可以指向一个可以执行此操作的JavaScript吗？

修改

re：提供代码一些代码基本上我正在使用，我认为是最典型的设置

<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）。 .nav { 保证金：0自动; 填充右：40像素; } 我不知道这个值来自哪里，为什么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将始终居中对齐

Answer 2

如果没有确切地知道你想要实现什么，很难说，但这至少应该有帮助...

您的CSS

#main {
    width:100%;
    text-align:center;
}

#nav {
    margin:0 auto;
}

#nav ul li {
    display:inline;
}

#content {
    text-align:left;
}

您的HTML

<div id="main">
    <!-- Your Navigation Menu -->
    <div id="nav">
        <ul>
            <li>Nav 1</li>
            <li>Nav 2</li>
            <li>Nav 3</li>
        </ul>
    </div>
    <!-- Your Content Area -->
    <div id="content">
        Lorem ipsum dolor sit amet, consectetur ...
    </div>
</div>

Answer 3

~~如果要将div放在容器中心，请尝试将容器的margin-left和margin-right设置为auto。~~

看起来有人遇到了同样的问题。希望这比我的第一个建议更好。：）

http://www.leveltendesign.com/blog/nickc/centering-a-css-menu-without-width-aka-shrink-wrap

Answer 4

怎么样

  #form1 {text-align:center}  
  #menuWrapper{display:inline-block;text-align:left}

此外，按以下方式标记菜单更方便：

<form id="navWrapper">
   <ul>
      <li><input></input></li>
       ...
   </ul>
</form>

并使用

  #navWrapper {text-align:center}  
  #navWrapper ul {display:inline-block;text-align:left}
  #navWrapper li {display:inline}

Answer 5

这是centering a div with no width的一个很好的解决方法。

是无表格的，可以在任何浏览器中使用！

（编辑：死链接替换为archive.org中的一个.BTW，其中描述的技术是：将您的DIV包装在SPAN中以使其内联。）

Answer 6

根据我相信你的要求，你想要动态居中一个div，因为宽度会根据可见的菜单项数量而改变。我假设你也希望动态地将自己调整为调整大小。这可以通过一些简单的javascript来完成，如下所示。我已经模拟了一个你可以玩的例子，在IE和FF中工作。 javascript是关键。另外值得注意的是，虽然不是你问题的一部分，但是调整大小时控制最小宽度可能是有意义的...如果遇到那个就ping我。

<html>
<head runat="server"></head>
<body onload="centerMenu()" onresize="centerMenu()">
<form id="form1" runat="server">
    <div id="menuWrapper" style="display:inline; height:20px;">
        <input type="text" value="menuItem" />
        <input type="text" value="menuItem" />
        <input type="text" value="menuItem" />
        <input type="text" value="menuItem" />
    </div>
</form>
 <script type="text/javascript">
 function centerMenu() 
 {
     //Wrap your menu contents in a div and get it's offset width
     var widthOfMenu = document.getElementById('menuWrapper').offsetWidth;
     //Get width of body (accounting for user installed toolbars)
     var widthOfBody = document.body.clientWidth;
     //Set the width of the menu Dynamically
     document.getElementById('menuWrapper').style.marginLeft = (widthOfBody - (widthOfMenu)) / 2;
 }
</script>
</body>
</html>

以div为中心而不设置宽度

6 个答案: