Get files Sample files to practice with (ZIP, 3.4 MB)
Add a <div> tag around everything inside the <body> tags. Since the <div> tag "wraps" around all of the content, give the <div> an id of wrapper. Don't forget a closing </div> tag!
Creating a <div> tag around all of the content on a page makes it easy to apply CSS that controls the whole section. In this case we will use CSS to center all of the content.
Open style.css and find the /* Start Here */ section.
Choose View and uncheck Split Vertically. This will stack Code View and Live View one above the other, making it easier to see the content become centered.
Add a margin: property to the selector called #wrapper which matches the id for the <div> in the HTML.
The margin property accepts 4 values for top, right, bottom, left respectively. The full CSS would be margin:0 auto 0 auto; but since the top and bottom values are equal and the left and right values are equal, you can use shorthand:
margin: 0 auto;
The top and bottom values are 0, since we don't need extra space above or below. The left and right margins are set to auto, which will split the space evenly between the two. This centers your layout!
See the How to work with HTML layout and Layout web pages with CSS tutorials for more information on how to properly layout a web page with HTML and CSS.
That's it! You're done. Please let us know what you think about this tutorial.