代码之家 › 专栏 › 技术社区 › Daniel

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

html css

Daniel · 技术社区 · 15 年前

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

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

保证金:0自动; } 我不知道这个值是从哪里来的,为什么40px会修复这个问题。

也许是ul或li加入了这一点。

我已经看过了显示:表格单元格的方法,但是IE存在这种复杂性,它仍然与其他解决方案存在相同的问题

我已将所有填充重置为0

*{padding:0;}

这就解决了它,我不需要抵消填充物 (我想我会把整个过程留给别人,所以如果有人遇到这个问题,我会为他们节省一些时间)

谢谢你的评论和回复

6 回复 | 直到 15 年前

Dashrath 12 年前

<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

luckykind 15 年前

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

Andy West 15 年前

~~如果要使div在其容器中居中,请尝试将容器的左边距和右边距设置为“自动”。~~

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

wheresrhys 15 年前

怎么样

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

Sz. 8 年前

centering a div with no width

是无表的,可以在任何浏览器中使用!

(编辑:将死链接替换为archive.org.BTW中的一个,这里描述的技术是:将DIV封装在一个SPAN中,使其内联。)

PortageMonkey 15 年前

根据我相信您会问的问题,您希望动态地将div居中,因为宽度将根据可见的菜单项的数量而改变。我假设您也希望它动态地将自身集中在resize上。这可以通过一些简单的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>