CSS 以 100% 宽度居中

发布于 2024-10-08 03:15:07 字数 181 浏览 3 评论 0原文

我试图将页面的所有内容居中，以便当您调整浏览器的大小时，内容会随着调整而移动。我使用 CSS 代码：

margin: 0px auto;
width: 670px;

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

原文

I'm trying to center all the content of a page so that when you adjust the size of the browser, the content moves along with the adjustment. I use the CSS code:

margin: 0px auto;
width: 670px;

However, I want a colored header to cover 100% of the width, while the text within the header adjusts with the rest of the page. How do I simultaneously do these two things?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

森林散布 2024-10-15 03:15:07

像这样的东西，当然你应该使用完整规范的 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>

something like this, of course you should use full spec html and linked css style sheets...

<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>

回复收藏 0 原文

绿萝 2024-10-15 03:15:07

下面是一个页面示例，其标题延伸到屏幕的整个宽度，但内容仅限于 670 像素区域。

http://jsfiddle.net/CaUD3/

希望能帮助您入门。

鲍勃

回复收藏 0 原文

南巷近海 2024-10-15 03:15:07

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

margin: 0px auto;

You shouldn't have a comma between the values used in the margin property. Instead, it should appear as follows:

margin: 0px auto;

回复收藏 0 原文

暮倦 2024-10-15 03:15:07

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

回复收藏 0 原文

临走之时 2024-10-15 03:15:07

使用margin-left:20%；
右边距：20%
这应该集中你的内容。

如果你想要一个现成的解决方案。看看 Matthew taylor 的布局

回复收藏 0 原文

小ぇ时光︴ 2024-10-15 03:15:07

您将需要嵌套一些 div...

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

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

这应该将您的 div#container 居中，然后您可以将内容放入该容器中。

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

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>

You will need to nest some divs...

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

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

That should center your div#container and you can put your content within that container.

EDIT: The above will just center your page container. I missed the header part. Here is that...

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>

回复收藏 0 原文

~没有更多了~