CSS 边距自动居中并带有上边距 - 有效吗？

Question

这是使 div 居中并应用上边距的有效 CSS 吗？

div {
     margin: 0 auto;
     margin-top: 30px;
     }

Answer 1

使用以下内容指定边距：

div { margin: 30px auto 0; }

Which isshorthand for:

div { margin : 30px auto 0 auto; } /* margin: [top] [right] [bottom] [left]; */

Which isshorthand for:

div {
    margin-top: 30px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

现在您已经了解了可以指定 margin 和/或 padding 的不同方式；选择权在你。

就优先顺序而言，后面的定义将适用；如规范中所定义。

要查找元素/属性组合的值，用户代理必须应用以下排序顺序：

1. 查找适用于目标媒体类型的相关元素和属性的所有声明。如果关联的选择器与相关元素匹配，则声明适用。
2. 声明的主要排序是按权重和来源进行的：对于普通声明，作者样式表会覆盖用户样式表，而用户样式表会覆盖默认样式表。对于“!important”声明，用户样式表会覆盖作者样式表，而作者样式表又会覆盖默认样式表。 “!important”声明覆盖普通声明。导入的样式表与导入它的样式表具有相同的来源。
3. 二级排序是根据选择器的特殊性进行的：更具体的选择器将覆盖更通用的选择器。伪元素和伪类分别算作普通元素和类。
4. 最后，按指定的顺序排序：如果两个规则具有相同的权重、来源和特异性，则指定的后者获胜。导入样式表中的规则被视为位于样式表本身中的任何规则之前。

除了对各个声明进行“!important”设置之外，此策略还赋予作者的样式表比读者的样式表更高的权重。因此，用户代理让用户能够关闭特定样式表的影响（例如通过下拉菜单）非常重要。

正如其他人提到的，您可能需要指定固定宽度才能看到您的 div 居中......

Answer 2

是的，但是关于将 div 居中，您还需要对其应用 width 。

Answer 3

是的。他们是对的：

div { width: 90%; margin : 30px auto 0 auto; }

我通常使用 90% 宽度作为一个很好的起点。

Answer 4

是的，因为 margin: 0 auto 将顶部和底部设置为 0，将左侧和右侧设置为 auto，因此将顶部设置为 30px 与说 margin : 30px auto 0 auto; 是一样的；

Answer 5

它是有效的，但可以更短，如下所示：

div {margin: 30px auto 0;}

当您只给出三个值时，中间的值将应用于左侧和右侧。

Answer 6

是的，这是有效的。 margin-top 将覆盖 margin 规则。

尽管您可能想添加一个 width 来使其居中。

Answer 7

我不明白为什么不......你也可以将其缩短为：

div {margin: 30px auto 0;}