HTML en CSS leren: Centreren

Centreren met margin auto

Jolien wil de melding in het midden van de pagina, niet tegen de linkerkant. Ze probeerde `text-align: center`, maar dan staat alleen de tekst in het midden, en niet het blok.

De ruimte eerlijk verdelen

Een blok met een breedte die kleiner is dan zijn ouder, zet je in het midden met margin-left: auto en margin-right: auto, of korter: margin: 0 auto. De browser verdeelt de ruimte die overblijft eerlijk over links en rechts.

Zonder breedte (of max-width) neemt het blok de hele breedte, en valt er niets te verdelen.

text-align: center is iets anders: dat zet de tekst in het vak in het midden, niet het vak zelf.

style.css

1.melding {2  max-width: 16rem;3  margin: 16px auto;4}

klimzaal.example

Probeer het zelf

Zet de hoofdinhoud (main) in het midden, nooit breder dan 48rem. En zet de melding in het midden, nooit breder dan 20rem.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Klimzaal De Steile Wand</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <img src="greep.svg" alt="" width="40" height="40">11      <h1>De Steile Wand</h1>12      <p class="slogan">Klimzaal in Ieper</p>13      <nav>14        <a href="index.html">Home</a>15        <a href="routes.html">Routes</a>16        <a href="prijzen.html">Prijzen</a>17        <a href="lessen.html">Lessen</a>18      </nav>19    </header>20    <main>21      <p class="melding">Zaterdag 12 april zijn we gesloten voor een wedstrijd.</p>22      <section class="kaarten">23        <article class="kaart">24          <h2>Dagkaart</h2>25          <p class="prijs">€ 14</p>26          <p>Klim de hele dag, zo lang je armen het volhouden.</p>27          <a class="knop" href="kopen.html">Kopen</a>28        </article>29        <article class="kaart">30          <h2>Tienbeurtenkaart</h2>31          <p class="prijs">€ 120</p>32          <p>Tien keer klimmen, een jaar geldig.</p>33          <a class="knop" href="kopen.html">Kopen</a>34        </article>35      </section>36      <section class="nieuws">37        <h2>Nieuws</h2>38        <p>In de boulderzaal hangen twaalf nieuwe routes, van groen tot zwart.</p>39        <p>Elke dinsdag is er een klimles voor beginners. Klimschoenen krijg je van ons.</p>40        <p>Op woensdagnamiddag klimmen de kinderen van de jeugdclub. Kom gerust eens kijken.</p>41      </section>42    </main>43    <footer>44      <p>Grepenstraat 7, 8900 Ieper</p>45    </footer>46  </body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #eef3ee;5  color: #1f2a24;6}7header {8  padding: 16px;9  background: #2d6a4f;10  color: #ffffff;11}12header h1 {13  margin: 4px 0 0;14}15.slogan {16  margin: 0 0 8px;17}18nav a {19  color: #ffffff;20}21main {22  padding: 0 16px 24px;23}24.melding {25  background-color: #ffe8d6;26}27.kaart {28  padding: 0 16px;29  background: #ffffff;30}31.prijs {32  font-size: 1.5rem;33  font-weight: bold;34}35.knop {36  background-color: #e76f51;37  color: #ffffff;38  text-decoration: none;39}40.nieuws {41  background: #ffffff;42}43footer {44  padding: 12px 16px;45  background: #1b4332;46  color: #ffffff;47}

klimzaal.example

Klaar voor meer?

De volledige les heeft 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

De ruimte eerlijk verdelen

Zonder breedte (of max-width) neemt het blok de hele breedte, en valt er niets te verdelen.

text-align: center is iets anders: dat zet de tekst in het vak in het midden, niet het vak zelf.

style.css

1.melding {2  max-width: 16rem;3  margin: 16px auto;4}

klimzaal.example

Probeer het zelf

Zet de hoofdinhoud (main) in het midden, nooit breder dan 48rem. En zet de melding in het midden, nooit breder dan 20rem.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Klimzaal De Steile Wand</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <img src="greep.svg" alt="" width="40" height="40">11      <h1>De Steile Wand</h1>12      <p class="slogan">Klimzaal in Ieper</p>13      <nav>14        <a href="index.html">Home</a>15        <a href="routes.html">Routes</a>16        <a href="prijzen.html">Prijzen</a>17        <a href="lessen.html">Lessen</a>18      </nav>19    </header>20    <main>21      <p class="melding">Zaterdag 12 april zijn we gesloten voor een wedstrijd.</p>22      <section class="kaarten">23        <article class="kaart">24          <h2>Dagkaart</h2>25          <p class="prijs">€ 14</p>26          <p>Klim de hele dag, zo lang je armen het volhouden.</p>27          <a class="knop" href="kopen.html">Kopen</a>28        </article>29        <article class="kaart">30          <h2>Tienbeurtenkaart</h2>31          <p class="prijs">€ 120</p>32          <p>Tien keer klimmen, een jaar geldig.</p>33          <a class="knop" href="kopen.html">Kopen</a>34        </article>35      </section>36      <section class="nieuws">37        <h2>Nieuws</h2>38        <p>In de boulderzaal hangen twaalf nieuwe routes, van groen tot zwart.</p>39        <p>Elke dinsdag is er een klimles voor beginners. Klimschoenen krijg je van ons.</p>40        <p>Op woensdagnamiddag klimmen de kinderen van de jeugdclub. Kom gerust eens kijken.</p>41      </section>42    </main>43    <footer>44      <p>Grepenstraat 7, 8900 Ieper</p>45    </footer>46  </body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #eef3ee;5  color: #1f2a24;6}7header {8  padding: 16px;9  background: #2d6a4f;10  color: #ffffff;11}12header h1 {13  margin: 4px 0 0;14}15.slogan {16  margin: 0 0 8px;17}18nav a {19  color: #ffffff;20}21main {22  padding: 0 16px 24px;23}24.melding {25  background-color: #ffe8d6;26}27.kaart {28  padding: 0 16px;29  background: #ffffff;30}31.prijs {32  font-size: 1.5rem;33  font-weight: bold;34}35.knop {36  background-color: #e76f51;37  color: #ffffff;38  text-decoration: none;39}40.nieuws {41  background: #ffffff;42}43footer {44  padding: 12px 16px;45  background: #1b4332;46  color: #ffffff;47}

klimzaal.example