居中我的网站布局不适用于 margin: auto

Question

我必须为学校设计一个网站，但遇到了一些麻烦。我不明白为什么我的网站布局不居中，尽管我们 margin:auto。它完美适用于其他练习。

这是 HTML 和我的 CSS 代码...

body {
  font-family: Roboto;
  background-color: #ededed;
}

nav {
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: rgb(87, 222, 135, 0.3);
  width: 1025px;
}

nav li {
  list-style-type: none;
  float: left;
  padding: 4px 10px;
  color: #093156;
}

nav img {
  float: left;
  padding: 7px 5px 7px 5px;
}

header {
  margin-top: 5px;
}

figure {
  position: relative;
}

figure p {
  color: white;
  position: absolute;
  bottom: 50px;
  right: 125px;
  font-size: 14pt;
  font-weight: 400;
}

h1 {
  margin-bottom: 0;
  margin-top: 10px;
}

hr {
  margin-top: 0;
  border: none;
  background-color: black;
  height: 2px;
  width: 1000px;
}

.klein_links,
.klein_rechts {
  font-size: 7pt;
  margin-bottom: 2px;
}

.klein_rechts {
  float: right;
}

.klein_links {
  float: left;
}

main img {
  margin: 0;
}

h4 {
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 0;
}

.normaal {
  font-size: small;
  margin-top: 2px;
}

article {
  overflow: hidden;
  width: 250px;
  height: 217px;
  float: left;
}

.eerste_sectie article:first-of-type {
  padding-right: 5px;
}

.eerste_sectie article:nth-child(2n) {
  padding-right: 10px;
  padding-left: 5px;
}

.eerste_sectie article:last-of-type {
  padding-left: 10px;
}

.tweede_sectie article:first-of-type {
  padding-right: 5px;
}

.tweede_sectie article:nth-child(2n) {
  padding-right: 10px;
  padding-left: 5px;
}

.tweede_sectie article:last-of-type {
  padding-left: 10px;
}

.derde_sectie article:first-of-type {
  padding-right: 5px;
}

.derde_sectie article:nth-child(2n) {
  padding-right: 10px;
  padding-left: 5px;
}

.derde_sectie article:last-of-type {
  padding-left: 10px;
}

#button {
  background-color: #343740;
  color: white;
  width: 150px;
}

main {
  margin: auto;
}

footer {
  background-color: black;
  color: white;
  height: 100px;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
  vertical-align: middle;
}

.derde_sectie p {
  background-color: #093156;
  color: white;
  padding: 8px;
  font-size: small;
  margin-top: 2px;
}

article>img:hover {
  opacity: 0.7;
}

img {
  float: none;
}

<header>
  <nav>
    <img src="assets/logo.png" alt="logo" width="40" height="30">
    <ol>
      <li><a>NIEUWS</a></li>
      <li><a>PRODUCTEN</a></li>
      <li><a>CONTACT</a></li>
    </ol>
  </nav>
  <figure>
    <img src="assets/banner.jpg" alt="banner" width="1025">
    <p>DE TUIN VAN SAM</p>
  </figure>
</header>

<main>
  <section class="eerste_sectie">
    <h1>Recent nieuws</h1>
    <hr>
    <article>
      <p class="klein_links">19 okt 2018</p>
      <p class="klein_rechts">Sam Agten</p>
      <img src="assets/blog01.jpg" alt="blog01">
      <h4>Tuin & Licht Deel 2</h4>
      <p class="normaal">Zuidelijk gelegen? Zicht op het westen? Deel 1 van onze spannende reeks. Hoe maak je optimaal gebruik van de lichtinval in je tuin
      </p>
    </article>
    <article>
      <p class="klein_links">19 okt 2018</p>
      <p class="klein_rechts">Sam Vanderstraeten</p>
      <img src="assets/blog02.jpg" alt="blog02">
      <h4>DIY Fridays</h4>
      <p class="normaal">Het is weer vrijdag! Wil je je tuin een klein beetje extra pit geven? Vandaag gebruikt Sam enkel een elastiekje en een zoutvatje om mooie tuindecora te maken
      </p>
    </article>
    <article>
      <p class="klein_links">19 okt 2018</p>
      <p class="klein_rechts">Sam van Rijn</p>
      <img src="assets/blog03.jpg" alt="blog03">
      <h4>Paddenstoelen</h4>
      <p class="normaal">Sam legt uit welke paddenstoelen giftig zijn en hoe je ze kan herkennen</p>
    </article>
    <article>
      <p class="klein_links">19 okt 2018</p>
      <p class="klein_rechts">Sam Swinnen</p>
      <img src="assets/blog04.jpg" alt="blog04">
      <h4>Tuin & Licht Deel 1</h4>
      <p class="normaal">De start van een nieuwe reeks. Ons team van Sammen leert je in deze 5-delige reeks hoe je optimaal gebruik kan maken van de lichtinval
      </p>
    </article>
  </section>
  <section class="tweede_sectie">
    <article>
      <p class="klein_links">19 okt 2018</p>
      <p class="klein_rechts">Sam Barzan</p>
      <img src="assets/blog05.jpg" alt="blog05">
      <h4>Slakkenseizoen</h4>
      <p class="normaal">Last van slakken? 10 handige tips om slakken te weren uit je tuintje</p>
    </article>
    <article>
      <p class="klein_links">19 okt 2018</p>
      <p class="klein_rechts">Sam Barzan</p>
      <img src="assets/blog06.jpg" alt="blog06">
      <h4>Tuinvrienden</h4>
      <p class="normaal">Dankzij jullie steun zijn we vastberaden om nog meer mensen te informeren over onze liefde voor Tuinen. Vanaf volgende maand zullen wij starten met een maandelijks qdgqdqdsg van blabla haha</p>
    </article>
    <article>
      <p class="klein_links">19 okt 2018</p>
      <p class="klein_rechts">Sam van Rijn</p>
      <img src="assets/blog07.jpg" alt="blog07">
      <h4>Hoge Bomen</h4>
      <p class="normaal">De verkiezingen zijn achter de rug, Sam kijkt vandaag naar de impact daarvan op jouw tuin</p>
    </article>
    <article>
      <p class="klein_links">19 okt 2018</p>
      <p class="klein_rechts">Sam Vanderstraeten</p>
      <img src="assets/blog08.jpg" alt="blog08">
      <h4>Wandelkriebels</h4>
      <p class="normaal">De herfst staat voor de deur. Sam neemt je mee op de 3 mooiste bostochten door de Ardennen</p>
    </article>
    <input type="button" id="button" value="More...">
  </section>

  <section class="derde_sectie">
    <h1>Actiecentrum</h1>
    <hr>
    <article>
      <img src="assets/feature01.jpg" alt="feature">
      <p>Offerte aanvragen</p>
    </article>
    <article>
      <img src="assets/feature01.jpg" alt="feature">
      <p>Vraag een cursus aan</p>
    </article>
    <article>
      <img src="assets/feature01.jpg" alt="feature">
      <p>Privacy & Veiligheid</p>
    </article>
    <article>
      <img src="assets/feature01.jpg" alt="feature">
      <p>Jobs</p>
    </article>
  </section>
</main>

我希望有人能帮助我。我真的不知道我做错了什么？

谢谢！！

编辑：感谢您提供的所有答案，lyulnie 和 Tyler Clay 的解决方案对我有用。 jorscobry，我不能使用你的解决方案，因为我的老师不允许我使用 div，但仍然感谢你的时间。

Answer 1

试试这个：

main {
 margin: 0 auto;
 display: table;
 width: 50%;
}

Answer 2

尝试将所有内容放入 ID 为容器的 div 中。给容器 div 一个宽度，例如 960px。给容器 div 一个 auto 边距。然后将 nav 的宽度更改为 100%，将 hr 的宽度更改为 100% 以填充容器 div 但不要超出容器范围。

例如：

#container {
  width: 960px;
  margin: auto;
}

nav {
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: rgb(87, 222, 135, 0.3);
  width: 100%;
}

hr {
  margin-top: 0;
  border: none;
  background-color: black;
  height: 2px;
  width: 100%;
}

希望对您有所帮助！

Answer 3

我已经使用 HTML/CSS 一段时间了，有时候居中可能会很困难，这取决于你在做什么。

有时分配固定宽度并计算居中效果很好。假设我有以下 HTML 我想要居中的代码

<img src="www.somewebsite.com/myfavoriteimage.jpg" alt="My Favorite Image">

如果我可以假设一个固定宽度，比如屏幕的 80%，那么在 CSS 中将其居中的简单方法如下

img{
    width:80%;
    margin-left:10%
    margin-right:10%
}

这仅在您能够假定要居中的项目的宽度时才有效。我不确定您要完成什么。您希望将整个网站居中吗？

居中我的网站布局不适用于 margin: auto

Centering the layout of my website doesn't work with margin: auto

html

css

margin