边距 0 自动；不工作答案

【问题标题】：margin 0 auto; not working边距 0 自动；不工作
【发布时间】：2016-10-20 04:59:14
【问题描述】：

我正在尝试使用 margin: 0 auto 让几个部分自动居中，但它不起作用。我浏览了整个网站。我的宽度已设置，我不使用浮点数并尝试使用边距，我将边距添加到正确的元素。但是这些部分仍然没有居中。任何帮助都会非常有帮助...在此先感谢您... CSS代码如下...

header {
  width: 100%;
  height: 60px;
  background: rgb(0, 0, 0);
}
section.Hero {
  width: 100%;
  height: 400px;
  background: rgb(200, 200, 200);
}
section.Features {
  width: 940px;
  height: 450px;
  background: rgb(150, 150, 150);
  margin: 0 auto;
}
section.Organize {
  width: 100%;
  height: 300px;
  background: rgb(200, 200, 200);
}
section.Share {
  width: 940px;
  height: 300px;
  background: rgb(150, 150, 150);
  margin: 0 auto;
}
section.Get {
  width: 100%;
  height: 100px;
  background: rgb(0, 0, 0);
}
footer {
  width: 100%;
  height: 60px;
  background: rgb(200, 200, 200);
}

<header class="Header">Header</header>

<section class="Hero">Hero</section>

<section class="Features">Features</section>

<section class="Organize">Organize</section>

<section class="Share">Share</section>

<section class="Get">Get</section>

<footer class="Footer">Footer</footer>

【问题讨论】：

你的html在哪里？如果您提供一个工作示例（例如 sn-p 或 jsfiddle），那么提供帮助会容易得多
这是一个 jsfiddle 链接：jsfiddle.net/#&togetherjs=0fnig077zD
您的代码似乎可以正常工作。
根据您的 sn-p 一切正常...
我同意其他人的观点……这很好用！

标签： html css alignment center

【解决方案1】：

内联块覆盖整行（从左到右），因此左边和/或右边的边距在这里不起作用。您需要的是一个块，一个块在左侧和右侧都有边框，因此可能会受到边距的影响。示例

#stuff {
     display: block;
     margin: 0 auto;
}

你可以用这个来达到同样的效果。

#stuff {
     text-align: center;
}

【讨论】：

【解决方案2】：

事实上，这些部分居中，你只是在小提琴中看不到它，因为这些部分是 940px 宽（并且小提琴窗口的部分小于那个，这就是为什么它们会自动向左对齐，以便能够访问整个容器）。你在这里看到，codepen 的宽度超过 940 像素（在全尺寸桌面显示器上）：

http://codepen.io/anon/pen/vXQZBA

如果您希望这些部分中的文本居中，请将 text-align: center; 添加到其 CSS 规则中。我在上面的 codepen 中做到了。

【讨论】：