Question

我正在创建一个投资组合，并想知道如何让它在浏览器页面上居中。它的链接是 http://optiq-portfolio.zxq.net/portfolio.html

我尝试添加

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

到css中的身体，但那不起作用。我该如何解决这个问题？

Answer 1

除此之外还有更多内容。您需要定义包装器div，在其上设置宽度，然后使用margin: 0 auto

例如，如果您使用body定义了width:1000px;，则它已经居中。当然，这会弄乱你剩下的东西。

margin-left: 0 auto也无效。

Answer 2

您不希望为您的身体添加边距，处理此问题的正确方法是使用margin: 0px auto; text-align:left;的容器元素。在您的身体元素上，您需要text-align:center;。

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

这会将您的网页集中在大多数现代浏览器中。

Answer 3

正如其他人所说，您需要创建一个包装容器，以便它包含您的主要内容。然后使用CSS指定固定宽度和自动水平边距。 David Walsh在他的博文Horizontally Center Your Website Structure Using 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; 
}

Answer 4

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

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