Question

页面在这里： https://gentle-day-3026.herokuapp.com/

这样的css文件：

https://gentle-day-3026.herokuapp.com/stylesheets/base.css 另一种方法是使用reset.css替换base.css （新用户只允许2个超链接）

尝试多次更改，包括以下方法：

<body> 
 <div id="divMain"> 
  ... 
 </div> 
</body> 


body 
{ 
 margin: 0; 
 padding: 0; 
 text-align: center; 
} 
#divMain
{ 
 margin: 0 auto; 
 padding: 0; 
 width: 1024px; 
 text-align: left; 
}

但它不起作用。谢谢你的帮助！

我甚至用一个非常简单的html测试它：

<!DOCTYPE html>
  <head>
   <link rel="stylesheet" href="stylesheets/base.css" media="Screen" type="text/css" />
  </head>
  <body>
  <div id="divMain">
     <h1> hello </h1>
  </div>
 </body>
</html>

它仍然无效！

Answer 1

在您当前的网页上，body的固定宽度为720px。删除它。接下来，在位于div内的最外侧body设置固定宽度。另外，请为此div提供0 auto的边距，这将导致其水平居中。

Answer 2

你做得很好。但是你给了body的宽度。从那里删除width属性。尝试这个CSS，它的工作原理：

body {
    color: #999999;
    font: 14px/1.5em "Lucida Grande",Arial,sans-serif;
    margin: 20px;
    width: auto;
}

enter image description here

请参阅base.css行号。 8身体有width: 720px;！而且，<div align="center">将其更改为<div class="center">并将css设为.center {width: 720px; margin: auto;}。请试试这个，告诉我们。

最后你应该有这个：

.center {width: 720px; margin: auto;}

<div class="center">

Answer 3

您需要将您的身体宽度设置为100％，将<div>设置为您想要的任何尺寸（例如720px），并将其边距设置为0自动。

Answer 4

您发布的示例代码非常适合将#divMain与中心（水平）对齐...

查看您为自己的网站发布的代码，看起来您已为body元素定义了固定宽度（请参阅base.css的第12行）。删除此固定宽度，然后将正确的宽度移动到包装器div（当前使用align="center"设置）可以解决您的问题。

Answer 5

body{
  width: 100%;
  height: 100%;
}

.divMain{
  width: 720px;
  margin: 0 auto;
}

可能对你有帮助。尝试在代码中添加此样式。

Answer 6

这里有2个问题：

您设置＆lt; body＆gt;的边距为0（上面的内联css）。更重要的是，＆lt; body＆gt;的宽度仅为720px（base.css，第8行），小于大多数桌面视口的宽度。结果，＆lt; body＆gt;捕捉到视口的左侧，边距为左侧为0，右侧有足够的空间。使用＆lt; body＆gt;对齐到左边，它的子节点（例如#divMain）不可能看起来居中。你可以做的是中心＆lt; body＆gt;使用margin: 20px auto或将＆lt; body＆gt;的宽度设置为100％来填充整个视口。
子项的宽度#divMain大于其正文的宽度。您必须将#divMain的宽度设置为小于720px（例如500px） - 使用margin:0 auto将子项水平居中于其父级的唯一方法是父级的宽度更大。当然，我认为你打算让#divMain的宽度小于1024px，所以我建议将＆lt; body＆gt;的宽度设置为100％，几乎可以保证它的宽度大于#divMain的宽度。。

简而言之，您可以拥有：

body{width:720px;margin:20px auto;} #divMain{width:500px;margin:0 auto;}

或

body{width:100%;} #divMain{width:1024px;margin:0 auto;}

希望有所帮助。

Answer 7

HTML

<body>
<div class="div-body-width">
....
</div>
</body>

CSS

body {
    margin: 0px;
    padding: 0px;

}

/*Insert here your width*/

.div-body-width {
    width: 1024px;  
    margin: 0 auto;
}

Answer 8

将您的身体内容包裹在div中：

<body>
    <div id="page">
      ...
    </div>
</body>

然后在你的css中：

#page {
    margin: auto;
}

如何使整个页面在中心？

8 个答案: