gradient
 
gradient
 
 
 
 
title

13. Centering The Layout

title
sign
 

 

In our templates, in the html file, the body (the content) is centered. This means that regardless of the viewer's screen resolution the layout will be centered in the web browser window.

Let's see our template and the html code that centers the layout. Open the file index.html from template/html/html_version.

Now choose to view the file in Split mode if you are not already in this viewing mode.

Take a look at the code and observe that before the <body> tag we have the <center> tag. This tag makes our entire layout to be centered in the web browser window regardless of its dimensions. It is placed before the <body> tag because this tag includes our layout's entire content. So defining the <body> to be centered you define the whole layout to be centered.

As you know like almost every tag in html the <center> tag closes with </center>. Scroll down to see the end lines of out layout's code and see that </center> tag in placed now just below the </body> tag.

If you want your layout to be aligned to the left (the default state) just delete the two lines of code <center> and </center>. Now the content of the page will be aligned to the left as you can see below.