Question

我知道我可以使用 margin：0 auto; 设置将元素放在容器中心

例如我可以有类似的东西：

<body>
        <div id="container">
                <p>SOMETHING</p>
        </div>
</body>

以及将id为“container”的div放在页面中心的相关CSS（在其容器的中心，即bosy元素）：

#container {
    margin: 0 auto;     
    width: 770px;       /* Imposto la larghezza */
}

确定，这对我来说很明显，但我对之前的CSS代码有一些疑问：

1）现在我使用的是固定维度模板（我在px中明确声明了维度），我是否也可以将此策略用于液体模板（我没有在px中声明维度，但是在％中）或者我有些问题吗？

2） margin：0 auto; 的确切含义是什么？它只意味着：“将一个元素放在其容器的中心”，它有一些更具体的含义吗？

TNX

安德烈

Answer 1

我的网站（个人资料）使用动态（例如液体）布局，至少是宽度方式（动态高度有点过分）。

要回答问题的第一部分，您当然可以将内容置于动态/液体布局中，并且可以使用margin: 0 auto;。我通常使用以下内容来集中任何东西......

.center
{
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}

与其他人的CSS会遇到的一个问题是，我注意到很多的人不知道如何使用CSS1而只是垃圾邮件CSS2 position这会弄乱即使你已经将它的一半转换回CSS1，一切都会好起来的。除非你正在处理一些真正数据密集的布局，否则位置应该被限制在整个页面上不超过大约五或六个实例，并且通常这是为了使内容保持在（X）HTML代码中的顶部（再次像我的网站）但在视觉上有菜单在顶部。

如果您了解CSS1，那么我写了CSS1 tutorial可能有所帮助，而CSS1反过来可以帮助您清除其他人的样式问题。

当您使用margin: 0 auto;（这称为 CSS简写）时，要回答问题的第二部分，您实际上是在写...

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

为了清楚地说明使用margin: 20ox 10px;的另一个例子，你有效地写了......

margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;

如果您制作一个快速HTML文件并使用Firefox / Firebug打开它并查看左侧面板HTML选项卡/右侧面板“布局”选项卡，它将显示如何根据任何给定代码计算元素的测量值。 / p>

如果您有任何疑问，请发表评论，我很乐意根据需要更新我的答案。

一些CSS怀疑如何使用margin来居中元素：0 auto;在模板中

1 个答案: