Learn HTML and CSS: Centring

Centring with margin auto

Joanne wants the notice in the middle of the page, not against the left edge. She tried `text-align: center`, but then only the text is in the middle, not the block.

Sharing out the space fairly

A block with a width smaller than its parent is centred with margin-left: auto and margin-right: auto, or in short: margin: 0 auto. The browser shares the space that's left fairly between left and right.

Without a width (or max-width) the block takes the full width, and there's nothing to share.

text-align: center is something else: it centres the text inside the box, not the box itself.

style.css

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

klimzaal.example

Try it yourself

Put the main content (main) in the middle, never wider than 48rem. And put the notice in the middle, never wider than 20rem.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>The Steep Wall climbing centre</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>The Steep Wall</h1>12      <p class="slogan">Climbing centre in Ilkley</p>13      <nav>14        <a href="index.html">Home</a>15        <a href="routes.html">Routes</a>16        <a href="prices.html">Prices</a>17        <a href="lessons.html">Lessons</a>18      </nav>19    </header>20    <main>21      <p class="notice">We're closed on Saturday 12 April for a competition.</p>22      <section class="cards">23        <article class="card">24          <h2>Day pass</h2>25          <p class="price">£14</p>26          <p>Climb all day, for as long as your arms hold out.</p>27          <a class="button" href="buy.html">Buy</a>28        </article>29        <article class="card">30          <h2>Ten-visit pass</h2>31          <p class="price">£120</p>32          <p>Ten visits, valid for a year.</p>33          <a class="button" href="buy.html">Buy</a>34        </article>35      </section>36      <section class="news">37        <h2>News</h2>38        <p>There are twelve new routes in the bouldering room, from green to black.</p>39        <p>There's a beginners' class every Tuesday. We'll lend you climbing shoes.</p>40        <p>On Wednesday afternoons the youth club climbs. Feel free to come and watch.</p>41      </section>42    </main>43    <footer>44      <p>7 Handhold Lane, Ilkley</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.notice {25  background-color: #ffe8d6;26}27.card {28  padding: 0 16px;29  background: #ffffff;30}31.price {32  font-size: 1.5rem;33  font-weight: bold;34}35.button {36  background-color: #e76f51;37  color: #ffffff;38  text-decoration: none;39}40.news {41  background: #ffffff;42}43footer {44  padding: 12px 16px;45  background: #1b4332;46  color: #ffffff;47}

klimzaal.example

Ready for more?

The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

Sharing out the space fairly

Without a width (or max-width) the block takes the full width, and there's nothing to share.

text-align: center is something else: it centres the text inside the box, not the box itself.

style.css

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

klimzaal.example

Try it yourself

Put the main content (main) in the middle, never wider than 48rem. And put the notice in the middle, never wider than 20rem.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>The Steep Wall climbing centre</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>The Steep Wall</h1>12      <p class="slogan">Climbing centre in Ilkley</p>13      <nav>14        <a href="index.html">Home</a>15        <a href="routes.html">Routes</a>16        <a href="prices.html">Prices</a>17        <a href="lessons.html">Lessons</a>18      </nav>19    </header>20    <main>21      <p class="notice">We're closed on Saturday 12 April for a competition.</p>22      <section class="cards">23        <article class="card">24          <h2>Day pass</h2>25          <p class="price">£14</p>26          <p>Climb all day, for as long as your arms hold out.</p>27          <a class="button" href="buy.html">Buy</a>28        </article>29        <article class="card">30          <h2>Ten-visit pass</h2>31          <p class="price">£120</p>32          <p>Ten visits, valid for a year.</p>33          <a class="button" href="buy.html">Buy</a>34        </article>35      </section>36      <section class="news">37        <h2>News</h2>38        <p>There are twelve new routes in the bouldering room, from green to black.</p>39        <p>There's a beginners' class every Tuesday. We'll lend you climbing shoes.</p>40        <p>On Wednesday afternoons the youth club climbs. Feel free to come and watch.</p>41      </section>42    </main>43    <footer>44      <p>7 Handhold Lane, Ilkley</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.notice {25  background-color: #ffe8d6;26}27.card {28  padding: 0 16px;29  background: #ffffff;30}31.price {32  font-size: 1.5rem;33  font-weight: bold;34}35.button {36  background-color: #e76f51;37  color: #ffffff;38  text-decoration: none;39}40.news {41  background: #ffffff;42}43footer {44  padding: 12px 16px;45  background: #1b4332;46  color: #ffffff;47}

klimzaal.example