Question

我创建了一个网站，页眉，页脚，正文都是页面宽度的100％，但无论分辨率如何，我都需要将所有内容都放在页面的中心位置。我尝试过使用包装器，但是标题和内容只是包装器的100％宽度而不是页面。

Answer 1

我正在走出困境并猜测背景颜色/图像是100％宽，但您希望实际内容居中（具有固定宽度？）。以下是对每个项目使用内部包装器div以保持内部内容居中的示例代码。我建议做一些完全不同的事情，可能在html和body元素上使用重复背景，但我不知道你的页面是什么样的。

所以..，以下内容可行，但会因为额外的标记而警告HTML纯粹主义者：）

你可以查看我放在一起的这个方法on this sample page的一个（超级丑陋）示例。

<强> CSS：

.wrapper {
   width: 960px; /* fixed width */
   margin: 0 auto; /* center */
}

<强> HTML：

<div id="header">
   <div class="wrapper">
   <h1>My Title</h1>
   </div>
</div>
<div id="content">
   <div class="wrapper">
   <h2>Sub Title</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
      do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat.</p>
   </div>
</div>
<div id="footer">
   <div class="wrapper">
   <p class="credits">Copyright 2009 by Your Company.com, LLC</p>
   </div>
</div>

Answer 2

除非具有指定的宽度，否则不能使用div元素。

对于正文，您可以使用

<div style="text-align: center;">text content</div>

Answer 3

这应该适合你：

CSS：

body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color:#564b47;
margin: 20px 140px  20px 140px;
text-align: center;
}
#content {
width: 100%;
padding: 0px;
text-align: left;
background-color: #fff;
overflow: auto;
}

HTML：

<body> 
<div id="content"> 
<p><b>center</b><br /><br /> 
This BOX ist centered and adjusts itself to the browser window.<br /> 
The height ajusts itself to the content.<br /> 
</div> 
</body>

此示例取自此网站，我刚才发现并始终将其引用为简单，干净的css模板： http://www.mycelly.com/

Answer 4

玩这个

body    {
  text-align: center;
  position: relative; 
}

#content    {
  width: 100%;
  height: auto;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

然后在HTML

中

<html>
<body>
<div id="header"></div>
<div id="content">
    <!-- place all of your content inside of here  -->
</div>
</body>
</html>

包装DIV在100％宽度的网站

4 个答案: