Question

我正在尝试将页面的所有内容集中在一起，以便在调整浏览器大小时，内容随着调整而移动。我使用CSS代码：

margin: 0px auto;
width: 670px;

但是，我想要一个彩色标题覆盖100％的宽度，而标题中的文字调整与页面的其余部分。我如何同时做这两件事？

Answer 1

这样的东西，当然你应该使用完整的规范html和链接的CSS样式表...

<html>
<head>
</head>
<body>
<div style="height:120px; background-color:#FF0000;">
    <div style="background-color:#FFFF00; width:670px; margin:0 auto;">
        My page title
    </div>
</div>
<div style="background-color:#00FFFF; width:670px; margin:0 auto;">
    My page content
</div>
</body>
</html>

Answer 2

以下是带有标题的页面示例，该标题可以拉伸整个屏幕宽度，但内容仅限于670像素区域。

http://jsfiddle.net/CaUD3/

希望能让你开始。

鲍勃

Answer 3

margin属性中使用的值之间不应使用逗号。相反，它应如下所示：

margin: 0px auto;

Answer 4

将文本嵌入文本当前所在容器的段落中，并将段落的样式设置为您需要的样式，同时将容器的样式设置为100％宽度。

Answer 5

使用margin-left:20%; margin-right:20% 这应该是你的内容的中心。

如果你想要一个现成的解决方案。看看Matthew taylor's Layouts

Answer 6

您需要嵌套一些div ...

body{
margin: 0px;
text-align: center;
}

div#container{
text-align: left;
background-color: #ffffff;
width: 670px;
margin: 0px auto;   
}

这应该使您的div＃容器居中，您可以将您的内容放在该容器中。

编辑：以上内容只会使您的页面容器居中。我错过了标题部分。这就是......

body{
margin: 0px;
text-align: center;
}

div#header-container{
height: 200px;
background-color: #999999;
}

div#header{
text-align: left;
background-color: #999999;
width: 670px;
height: 200px;
margin: 0px auto;   
}

div#content{
text-align: left;
background-color: #ffffff;
width: 670px;
margin: 0px auto;   
}


<html>
<body>
<div id="header-container">
     <div id="header">Page Title and the such...</div>
</div>
<div id="content">
Some Page Content
</div>
</body>
</html>

CSS居中，宽度为100％

6 个答案: