Question

我正在尝试使用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>

Answer 1

内联块覆盖整条线（从左到右），因此左边和/或右边距不会在这里工作。你需要的是一个块，一个块在左边和右边有边框，所以可以受到边距的影响。实施例

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

你可以使用它来达到同样的效果。

#stuff {
     text-align: center;
}

Answer 2

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

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

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

保证金0自动;不工作

2 个答案: