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留个自动余量。然后，将导航栏的宽度更改为100％，将hr的宽度更改为100％，以填充容器div，但不要超出该范围。

例如：

word.Documents.Open('//folder_1/folder_2/Test_template.dotx')

# You could also specify the working directory explicitly with os, as in:
os.chdir('//folder_1/folder_2')

希望这会有所帮助！

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

3 个答案: