如何使主div容器居中对齐？

Question

如何使主div容器居中对齐？

28

我一直在想其他人是如何使主要的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

- Amra

也可以使用<div align="center"></div>将您的内容居中，但更好的解决方案如下。 - ant

1

在您提供的页面上，容器确实使用了margin auto。然而，padding auto并不是必需的，甚至可能会使一些浏览器混淆。 - wheresrhys

@wheresrhys：谢谢，我在CSS中找不到它。 - Amra

你应该安装Firebug（如果你使用Firefox）。点击HTML选项卡，然后点击包装器div，在右侧面板中它会告诉你所有的样式。 - wheresrhys

4个回答

4

基本的居中页面的原则是要有body CSS和main_container CSS。它应该看起来像这样：

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

- Kids Formal

3

您可以通过将body元素的text-align属性设置为center来使容器居中。然后将容器的text-align属性设置为left，以使所有文本等左对齐。

- Megan

欢迎来到 Stack Overflow =) 请花点时间阅读 Stack Overflow Markdown 帮助页面，以了解如何格式化您的答案。 - David Thomas

1

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

通常使用 固定宽度容器，margin: 0 auto 就足够了。

- Juraj Blahunka

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tatu Ulmanen · Accepted Answer

不要使用*选择器，因为它会应用于页面上的所有元素。假设您有以下结构：

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