Html 带有顶部边距的 CSS 边距自动居中 - 有效吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9165369/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS margin auto center with top margin - VALID?
提问by user1040259
Is this valid CSS to center the div and also apply a top margin?
这是有效的 CSS 来居中 div 并应用上边距吗？
div {
margin: 0 auto;
margin-top: 30px;
}
回答by xandercoded
Use the following to specify margins:
使用以下内容指定边距：
div { margin: 30px auto 0; }
Which is shorthand for:
这是以下的简写：
div { margin : 30px auto 0 auto; } /* margin: [top] [right] [bottom] [left]; */
Which is shorthand for:
这是以下的简写：
div {
margin-top: 30px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
Now that you know the different ways margins, and/or padding, can be specified; the choice is yours.
既然您知道可以指定margins 和/或的不同方式padding；这是你的选择。
As far a precedence is concerned the later definition will apply; as defined in the spec.
至于优先级，后面的定义将适用；如规范中所定义。
To find the value for an element/property combination, user agents must apply the following sorting order:
- Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question.
- The primary sort of the declarations is by weight and origin: for normal declarations, author style sheets override user style sheets which override the default style sheet. For "!important" declarations, user style sheets override author style sheets which override the default style sheet. "!important" declaration override normal declarations. An imported style sheet has the same origin as the style sheet that imported it.
- The secondary sort is by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
- Finally, sort by order specified: if two rules have the same weight, origin and specificity, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.
Apart from the "!important" setting on individual declarations, this strategy gives author's style sheets higher weight than those of the reader. It is therefore important that the user agent give the user the ability to turn off the influence of a certain style sheet, e.g., through a pull-down menu.
要查找元素/属性组合的值，用户代理必须应用以下排序顺序：
- 对于目标媒体类型，查找适用于相关元素和属性的所有声明。如果关联的选择器与相关元素匹配，则声明适用。
- 声明的主要分类是按权重和来源：对于普通声明，作者样式表覆盖用户样式表，用户样式表覆盖默认样式表。对于 "!important" 声明，用户样式表会覆盖作者样式表，而作者样式表会覆盖默认样式表。"!important" 声明覆盖正常声明。导入的样式表与导入它的样式表具有相同的来源。
- 次要排序是根据选择器的特殊性：更具体的选择器将覆盖更通用的选择器。伪元素和伪类分别算作普通元素和类。
- 最后，按指定的顺序排序：如果两个规则具有相同的权重、来源和特异性，则指定的后者获胜。导入的样式表中的规则被视为在样式表本身中的任何规则之前。
除了个别声明的“！important”设置之外，这种策略赋予作者的样式表比读者的样式表更高的权重。因此，用户代理让用户能够关闭特定样式表的影响是很重要的，例如，通过下拉菜单。
As others have mentioned, you'll likely need to specify a fixed width in order to see your divcentered ...
正如其他人所提到的，您可能需要指定一个固定的宽度才能看到div居中...
回答by driangle
yes, but with regards to centering the div you'll also want to apply widthto it.
是的，但是关于将 div 居中，您还需要对其进行应用width。
回答by Computer Guy
Yes. And they're right:
是的。他们是对的：
div { width: 90%; margin : 30px auto 0 auto; }
I generally use 90% width as a good starting point.
我通常使用 90% 的宽度作为一个好的起点。
回答by zero
yes it is, because margin: 0 auto is setting top and bottom to 0 and left and right to auto so setting top to 30px is just the same as saying margin : 30px auto 0 auto;
是的，因为 margin: 0 auto 将 top 和 bottom 设置为 0，将 left 和 right 设置为 auto，所以将 top 设置为 30px 就等于说 margin : 30px auto 0 auto;
回答by daGUY
I don't see why not...you could also shorten this to:
我不明白为什么不......你也可以将其缩短为：
div {margin: 30px auto 0;}
div {margin: 30px auto 0;}
回答by Jezen Thomas
It's valid, but it can be shorter like this:
它是有效的，但它可以像这样更短：
div {margin: 30px auto 0;}
div {margin: 30px auto 0;}
When you only give three values, the middle value is applied to both left and right sides.
当您只给出三个值时，中间值应用于左右两侧。
回答by Madara's Ghost
Yes, it's valid. margin-topwill override the marginrule.
是的，它是有效的。margin-top将覆盖margin规则。
Though you might wanna add a widthto center it.
尽管您可能想添加一个width以使其居中。
