1

我正在创建一个作品集,并想知道如何使它以浏览器页面为中心。它的链接是 http://optiq-portfolio.zxq.net/portfolio.html

我尝试添加

margin-left:0 auto;
margin-right:0 auto;

到css中的身体,但这不起作用。我怎样才能解决这个问题?

4

4 回答 4

2

不仅如此。您需要定义一个包装器 div,在其上设置宽度,然后使用margin: 0 auto

例如,如果您已经body定义了width:1000px;它,它将已经居中。当然,这会弄乱你的其他东西。

margin-left: 0 auto也无效。

于 2013-07-01T22:28:00.637 回答
1

正如其他人所说,您需要创建一个包装容器,以便它包含您的主要内容。然后用 CSS 指定固定宽度和自动水平边距。David Walsh 在他的博客文章使用 CSS 将您的网站结构水平居中对此进行了很好的解释。

HTML

<html>
<head>
    <title>My Site</title>
</head>
<body>
<div id="wrap">

        <!-- WEBSITE GOES HERE -->

</div>
</body>
</html>

CSS

#wrap { 
    width: 900px; 
    margin: 0 auto; 
}
于 2013-07-01T23:04:20.613 回答
1

您不想在正文中添加边距,处理此问题的正确方法是使用margin: 0px auto; text-align:left;. 在你的身体元素上你会想要text-align:center;

其余代码应包含在容器元素中。

这将使您的页面在大多数现代浏览器中居中。

于 2013-07-01T22:26:22.043 回答
1

margin-left: 0 auto;并且margin-right: 0 auto;不是有效的 CSS 属性。

您可以执行类似的操作margin:0 auto;,将顶部和底部设置为 0,将左右设置为自动。

于 2013-07-02T00:32:25.317 回答