Question

我希望有人可以帮助我，我正在做这件事......

我对HTML，CSS等都很陌生，只有一年多的经验，这是我手工编写的第一个网站 - 我以前的尝试是使用Wordpress。

无论如何，我会尝试尽可能详细地写这篇文章......我们走吧！：）

我正试图将我的主div与ID包装器对齐。我的问题是，当我使用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;}

分中心问题

1 个答案: