我正在创建一个作品集,并想知道如何使它以浏览器页面为中心。它的链接是 http://optiq-portfolio.zxq.net/portfolio.html
我尝试添加
margin-left:0 auto;
margin-right:0 auto;
到css中的身体,但这不起作用。我怎样才能解决这个问题?
我正在创建一个作品集,并想知道如何使它以浏览器页面为中心。它的链接是 http://optiq-portfolio.zxq.net/portfolio.html
我尝试添加
margin-left:0 auto;
margin-right:0 auto;
到css中的身体,但这不起作用。我怎样才能解决这个问题?
不仅如此。您需要定义一个包装器 div,在其上设置宽度,然后使用margin: 0 auto
例如,如果您已经body
定义了width:1000px;
它,它将已经居中。当然,这会弄乱你的其他东西。
margin-left: 0 auto
也无效。
正如其他人所说,您需要创建一个包装容器,以便它包含您的主要内容。然后用 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;
}
您不想在正文中添加边距,处理此问题的正确方法是使用margin: 0px auto; text-align:left;
. 在你的身体元素上你会想要text-align:center;
。
其余代码应包含在容器元素中。
这将使您的页面在大多数现代浏览器中居中。
margin-left: 0 auto;
并且margin-right: 0 auto;
不是有效的 CSS 属性。
您可以执行类似的操作margin:0 auto;
,将顶部和底部设置为 0,将左右设置为自动。