In this lesson we're going to put our knowledge of the Box Model to the test and use it to centre our main
div with an
ID of "wrapper".)
We use margins to centre block-level elements (structural elements are called block-level elements. Elements like
span are what's known as inline elements, as they are smaller and less important structurally).
Question for you: what would the margin-left and margin-right of our div need to be to centre the content in the middle of the page?
There's no way we can answer this with an exact number. The margins have to be equal on both sides. Did you get that?
In CSS we use the
auto value of the
margin property to say to the browser – work it out for us! The browser obliges and makes both margins equal each other.