在不设置宽度的情况下居中 div答案

【问题标题】：centering a div without setting width在不设置宽度的情况下居中 div
【发布时间】：2010-12-21 08:09:04
【问题描述】：

有没有办法做到这一点？当使用可以经常更改项目数量的导航时，不必计算和更新 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）。 .导航{ 边距：0 自动；填充右：40px； } 我不知道这个值是从哪里来的，为什么 40px 可以解决这个问题。

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

我已经查看了 display:table-cell 的执行方式，但是 IE 存在这种复杂性，并且它仍然存在与其他解决方案相同的问题

编辑（最终）

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

*{padding:0;}

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

感谢cmets和回复

【问题讨论】：

如果不知道您的 DIV 中有什么，这很难回答。听起来，作为先决条件，您需要使您的 DIV 弹性（表格）宽度而不是默认块宽度。这完全是另一个问题。
您能否提供您在问题中使用的 HTML\CSS？如果解决方案涉及 Javascript，我们就有麻烦了……
使用我下面列出的解决方案，附加填充没有问题...我正在使用输入来模拟菜单...所以这可能表明 UL 样式正在添加填充。
是的，ul 正在添加填充
Centering a div block without the width 的可能重复项

标签： css html

【解决方案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 将始终居中对齐

【讨论】：

我要添加的一个补充（虽然不言自明）是将padding-left: 0; 添加到.nav ul，这是没有使用重置css

【解决方案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>

【讨论】：

这行得通（在某种程度上 :) 它在我想要的地方不起作用，但我必须检查 css 文件以查看是否存在任何冲突。但是某种程度是指居中。它使内容的左侧居中，因此居中有点偏离。我尝试在#nav 内的右侧添加一个 40 像素的填充，但这意味着在等式中添加一个静态值。尽管 40px 有效，但根据元素的大小，它会倾向于悬挂在一侧或另一侧
是的...就像我说的那样，如果不确切地看到您在做什么就很难判断...但这听起来像是与其他样式的冲突...这绝对可以自己使用，如果您试图将某些内容居中，您希望远离添加静态值。尝试临时添加“border:1px solid red;”到问题区域，以便您可以更好地了解它的布局......

【解决方案3】：

~~如果你想让一个 div 在它的容器中居中，尝试将容器的 margin-left 和 margin-right 设置为 auto。~~

看起来有人遇到了和你一样的问题。希望这比我的第一个建议更好。 :)

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

【讨论】：

啊，是的。我的错。现在我明白了为什么首先要问这个问题。

【解决方案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}

【讨论】：

【解决方案5】：

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

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

（编辑：用 archive.org 中的一个替换死链接。顺便说一句，那里描述的技术是：将 DIV 包装在 SPAN 中以使其内联。）

【讨论】：

注意：提供的链接（参考）不再可用。

【解决方案6】：

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

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

【讨论】：