The margin
property also lets you center content. However, you must follow a few syntax requirements. Take a look at the following example:
div.headline { width: 400px; margin: 0 auto; }
In the example above, margin: 0 auto;
will center the divs in their containing elements. The 0 sets the top and bottom margins to 0 pixels. The auto
value instructs the browser to adjust the left and right margins until the element is centered within its containing element.
In order to center an element, a width must be set for that element. Otherwise, the width of the div will be automatically set to the full width of its containing element, like the <body>
, for example. It’s not possible to center an element that takes up the full width of the page, since the width of the page can change due to display and/or browser window size.
In the example above, the width of the div
is set to 400 pixels, which is less than the width of most screens. This will cause the div to center within a containing element that is greater than 400 pixels wide.
Instructions
Set the width of the .pull-quote
class elements to 350 pixels.
In one line, set the vertical (top and bottom) margins of the .pull-quote
class to 0
and the horizontal (left and right) margins to auto
.
Set the vertical margins of the #main
element to 0
, and the horizontal margins to auto
.