Learn how to center a website using HTML and CSS.
Čo budete potrebovať
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.
Before you start
Download and save the project files. Open center-website.html in Dreamweaver, and view the Source Code in Split view.
Create a "wrapper" div
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.
HTML
<div id="wrapper">
(content)
</div>
Set the margins with CSS
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!
CSS
#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.
