上边距的 CSS 边距自动居中 - 有效吗？答案

【问题标题】：CSS margin auto center with top margin - VALID?上边距的 CSS 边距自动居中 - 有效吗？
【发布时间】：2012-02-28 05:43:10
【问题描述】：

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

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

【问题讨论】：

标签： html css margin

【解决方案1】：

使用以下内容指定边距：

div { margin: 30px auto 0; }

简写为：

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

简写为：

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

现在您知道可以指定margins 和/或padding 的不同方式；选择权在你。

就优先级而言，后面的定义将适用；在the spec 中定义。

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

查找适用于目标媒体类型的相关元素和属性的所有声明。如果关联的选择器与相关元素匹配，则应用声明。

声明的主要类型是按权重和来源：对于普通声明，作者样式表会覆盖用户样式表，而用户样式表会覆盖默认样式表。对于“！important”声明，用户样式表会覆盖作者样式表，而作者样式表会覆盖默认样式表。 “！important”声明覆盖普通声明。导入的样式表与导入它的样式表具有相同的来源。

二级排序是根据选择器的特殊性：更具体的选择器将覆盖更通用的选择器。伪元素和伪类分别算作普通元素和类。

最后，按指定顺序排序：如果两个规则具有相同的权重、起源和特异性，则指定的后者获胜。导入的样式表中的规则被认为在样式表本身的任何规则之前。

除了单个声明的“！important”设置之外，此策略使作者的样式表的权重高于读者的样式表。因此，用户代理必须让用户能够关闭特定样式表的影响，例如，通过下拉菜单。

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

【讨论】：

【解决方案2】：

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

div {margin: 30px auto 0;}

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

它是有效的，但它可以像这样更短：

div {margin: 30px auto 0;}

当你只给三个值时，中间的值适用于左右两边。

【讨论】：

【解决方案5】：

是的，因为 margin: 0 auto 将 top 和 bottom 设置为 0，left 和 right 设置为 auto 所以将 top 设置为 30px 与说 margin : 30px auto 0 auto;

【讨论】：

【解决方案6】：

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

虽然您可能想添加一个 width 以使其居中。

【讨论】：

【解决方案7】：

是的。他们是对的：

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

我一般以 90% 的宽度为起点。

【讨论】：