Learn how to center a website using HTML and CSS.
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.
When you build a web page, content is positioned on the left by default. Oftentimes, a centered layout is is more aesthetically pleasing and puts your viewer’s eyes on your design. To do this, it is important to structure a page properly in HTML and then apply CSS to center it in the browser.
Download and save the project files. Open center-website.html in Dreamweaver, and view the Source Code in Split view.
Add a
Creating a
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
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!
#wrapper {
...
margin: 0 auto;
}
Click Preview in Browser and choose your preferred browser to view the newly centered layout.
You will need to save your files to view the changes.