html - Div居中问题

Question

我希望有人能帮助我并且我这样做是对的...

我对 HTML、CSS 和类似的东西还很陌生，只有一年多的经验，这是我手工编写代码的第一个网站 - 我之前尝试使用 Wordpress。

无论如何，我会尽量让这篇文章尽可能详细......我们开始吧! :)

我正在尝试将我的主 div 置于 id 为 wrapper 的中心。我的问题是，当我使用 margin: 10px auto; 时，无论我的 PC 的分辨率或浏览器的缩放级别如何，它都会完美地居中。然后，当我的浏览器窗口重新调整大小时，包装 div 开始四处移动，越过我的导航栏 - 以下是适用于包装 div 和导航栏的 CSS 规则；

#wrapper {
   width: 850px;
   margin: 10px auto;
   padding: 10px;
   background: white;
}

#nav {
   padding: 5px;
   position: fixed;
   left: 35px;
   top: 250px;
}

现在，当我摆脱 margin: 10px auto 并使用 margin: 10px 250px 时，div 几乎是我的分辨率和浏览器缩放的中心，但是当我缩小它会将整个页面向左移动，但我的窗口大小调整问题消失了....

我们非常欢迎任何帮助或建议!

Answer 1

我假设内容正在流过作为侧边栏放置在左侧的导航？ 在这种情况下，只需将 margin-left: 200px(注意:将 200px 更改为导航宽度)添加到包装器 div，如下所示:

#wrapper {
   width: 850px;
   margin: 10px auto;
   padding: 10px;
   background: white;
   margin-left: 100px;
}

编辑:

我的原始答案不会将包装器 div 居中。 您可以做的是在 #wrapper 中添加另一个 div，并向其添加所有背景样式等。 然后，您可以使用 margin:auto 将包装器 div 居中，并添加一个左填充以避免它溢出您的导航。

JSfiddle

CSS

#wrapper {
    margin: 10px auto;
    padding-left: 100px;
    width: 850px;
}

#wrapper .content{    
    padding: 10px;
    background: white;
}

#nav {
    padding: 5px;
    position: fixed;
    left: 35px;
    top: 250px;
}

HTML

<div id="wrapper">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...</p>
    </div>
</div>

<div id="nav">
    navigation
</div>

另一种解决方案也可以是在正文中添加填充，尽管这会影响您的整个页面(即页脚和页眉等)

body{padding-left: 200px;}