2

页面在这里： 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>

它仍然没有工作！

4

8 回答 8

4

在当前页面上，body固定宽度为720px. 删除这个。接下来，在div位于body. 此外，给它div一个边距0 auto，这将导致它水平居中。

于 2012-06-07T08:10:52.850 回答
2

你所做的很好。但是你给了一个宽度body。从那里删除width属性。试试这个 CSS，它可以工作：

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

在此处输入图像描述

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

最后你应该有这个：

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

<div class="center">
于 2012-06-07T08:12:22.683 回答
1

您需要将您的身体宽度设置为 100%，设置为您<div>想要的任何大小（例如 720 像素），并将其边距设置为 0 自动。

于 2012-06-07T08:12:34.260 回答
0

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

查看您为您的网站发布的代码，您似乎已经为您的body元素定义了一个固定宽度（参见第 12 行base.css）。删除这个固定宽度，然后将正确的宽度移动到包装器div（当前使用 设置align="center"）应该可以解决您的问题。

于 2012-06-07T08:12:34.587 回答
0 
body{
  width: 100%;
  height: 100%;
}

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

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

于 2012-06-07T08:36:00.857 回答
0

你在这里有两个问题：

  1. 您将 <body> 的边距设置为 0（上面的内联 css）。更重要的是，<body> 的宽度只有 720px（base.css，第 8 行），小于大多数桌面视口的宽度。结果，<body> 贴紧到视口的左侧，margin-left 为 0，右侧有足够的空间。<body> 向左对齐，它的子元素（例如#divMain）不可能看起来居中。您可以做的是使用 使 <body> 居中margin: 20px auto，或者将 <body> 的宽度设置为 100% 以填充整个视口。

  2. 子元素#divMain 的宽度大于其主体的宽度。您必须将#divMain 的宽度设置为小于 720 像素（例如 500 像素）——让子级在其父级中水平居中的唯一方法margin:0 auto是让父级的宽度更大。当然，我不认为你打算让#divMain 的宽度小于 1024px，所以我建议将 <body> 的宽度设置为 100%，这几乎可以保证它的宽度会大于 #divMain 的宽度。

简而言之，您可以拥有：

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

或者

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

希望有帮助。

于 2012-06-07T08:47:26.050 回答
0

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;
}
于 2012-06-07T09:21:09.083 回答
-1

将您的正文内容包装在 div 中：

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

然后在你的 css 中：

#page {
    margin: auto;
}
于 2012-06-07T08:12:59.637 回答