0

我知道我可以使用设置margin: 0 auto; 将元素定位在其容器的中心

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

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

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

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

好的，这对我来说很清楚，但我对前面的 CSS 代码有一些疑问：

1）现在我使用的是固定尺寸模板（我明确声明了以 px 为单位的尺寸），我是否可以将此策略也用于液体模板（我没有以 px 为单位声明尺寸，但以 % 为单位）或者我有一些问题?

2）margin的确切含义是什么：0 auto；? 它仅意味着：“将元素定位在其容器的中心”或者它具有更具体的含义？

肿瘤坏死因子

安德烈亚

4

1 回答 1

0

我的网站（配置文件）使用动态（例如液体）布局，至少在宽度方面（动态高度有点过分）。

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

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

您在使用其他人的 CSS 时会遇到的一个问题是，我注意到很多人不知道如何使用 CSS1，而只是向 CSS2 发送垃圾邮件position，即使您已将其一半转换回 CSS1，这也会使一切变得混乱。位置应限制在整个页面上不超过大约五个或六个实例，除非您正在处理一些真正的数据密集型布局，通常这是为了让 SEO 将内容保持在 (X)HTML 代码的顶部（再次像我的网站一样），但在视觉上将菜单放在顶部。

我写了一个CSS1 教程，如果您了解 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 选项卡/右侧面板“布局”选项卡，它将向您展示如何根据任何给定代码计算元素的测量值。

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

于 2014-05-30T07:51:19.583 回答