Question

我一直想知道其他人如何与主div容器对齐，因为我目前管理的唯一方法是在css文件中添加以下内容：

*{
padding:auto;
margin:auto;
text-align:centre;
}

我看过其他网页使用：*{padding:0px;margin:0px}，但我看不到他们在哪里或做了什么来集中主容器。

有人可以解释一下吗？

代码示例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>This is the main container</title>
<style type="text/css">
*{
padding:auto;
margin:auto;
text-align:center;
}
</style>
</head>
<body>
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;">
<b>This is the main container.</b>
</div>
</body>
</html>

有人可以在下一页解释他们是如何做到的吗？

http://www.csszengarden.com/?cssfile=/179/179.css&page=4

Answer 1

请勿使用*选择器，因为它将适用于页面上的所有元素。假设你有这样的结构：

...
<body>
    <div id="content">
        <b>This is the main container.</b>
    </div>
</body>
</html>

然后，您可以使用以下内容#content div居中：

#content {
    width: 400px;
    margin: 0 auto;
    background-color: #66ffff;
}

不知道你在其他地方看到了什么，但这是要走的路。您看到的* { margin: 0; padding: 0; }代码段用于重置所有浏览器的浏览器默认定义，以使您的网站在所有浏览器上的行为相似，这与主容器居中无关。

大多数浏览器都会对某些元素应用默认边距和填充，这些元素通常与其他浏览器的实现不一致。这就是为什么使用这种“重置”通常被认为是聪明的原因。您提供的重置片段是最简单的重置样式表，您可以在此处阅读有关该主题的更多信息：

http://meyerweb.com/eric/tools/css/reset/

Answer 2

您可以对齐文本：将正文居中以使容器居中。然后text-align：离开容器以获取所有文本等，以便左对齐。

Answer 3

将页面居中的基本原则是拥有一个body CSS和main_container CSS。看起来应该是这样的：

body {
     margin: 0;
     padding: 0;
     text-align: center;
}
#main_container {
     margin: 0 auto;
     text-align: left;
}

Answer 4

我会省略* { text-align:center }声明，因为它为所有元素设置了中心对齐。

通常使用固定宽度的容器 margin: 0 auto应该足够了

如何让主div容器与中心对齐？

4 个答案: