How To Center Align A Website Using HTML And CSS?
October 14th, 2016 | by Ravi Chahar || 7 Comments |
There are many people who want to center align a website because of the full header and footer. The layout of every website is different.
If you take an action to design a full-width header and footer but keep the content of the website in the center then you have to use the HTML and CSS.
Though it is not necessary to have a full-width header or footer. You can center align a website with the full content including header and footer.
Understand The Concept of HTML and Center Align a Website.
First of all, you must have the basic knowledge of the HTML including the starting and ending tags. If you design a WordPress theme or any template then follow the guide.
Step 1:- Put an HTML division tag around the content of your website. If you want to leave the header and footer then just add the content in the division tag.
//code for the header
//code to display the content
//code to show the footer
In the above code, the <div> tag is added with a class. You can give any class you want. It’s just the practice of coding and the habits.
If you want to center the whole site then add everything between the <div> tag.
//codes for the content of the full website
Step 2:- An important thing to center align a website is the use of CSS language. You have to target the class given in the division tag.
margin: 0 auto;
This code would do the work for you. The width of the website would vary because every website has its own design and layout width.
NOTE:- The main thing is to set the margin. The “auto” value would keep the margin equal from right and left sides.
Did You Get A Solution To Center Align A Website?
As I have shown you by taking an example, you don’t need to do much. Just place the content of the website which you want to center align in the division tag and target its class with the auto margin.
If you’re a developer then it won’t be a problem for you to configure it. The above method can be applied to any web designing project.