Home > How-to

How to centerize a website (while zooming out)

image not displayed

Want perfection in your website by making contents centered while zooming out ??
Don’t wan’t to use predesigned themes ??
You are at the right place.

You will come across so many articles on the internet on how to centerize your website but according to my personal experience, no one explains clearly how to do that.
Today, I am going to explain the whole process to arrange the contents of your website in center while zooming it out.
So, the steps are as follows :
  • First of all, go to your HTML coding of part of the website, you want to center.

  • Now, before your content part, put a "center" tag and then wrap the whole content in a ‘div’ class. You can give any name to that div class.

  • Then, come to the CSS part of coding.

  • Here, You have to assign properties to the div class you created in previous step.

  • In this class, you just have to assign to properties that are “text-align: left” and “width: 75em” just like below image :

  • image not displayed

“Text-align: left” property makes your text start from the left instead of starting from the center part.
And the “width:” property ensures that you have a fixed width while zooming out your website.

Note: Onle use ‘em’ unit to define the width size. Because, according to me, it’s the best unit we got for defining the size in CSS. ‘em’ unit adjusts itself according to the screen resolution without compelling you to make additional efforts.

  • You also have to keep this in your mind that your website must not destroy the responsiveness property at any cost. So, you have to make some changes in the “media queries” of your CSS part also.

  • So, in your CSS code, just put a media query having max width of around 1260px and set the width of div (created in previous step) to 100% or as per your wish, but below 100%. It can be shown as below:

    image not displayed

  • Here, “.title” and ”.outer” are the example of my div classes.

  • Done !!........Now, try zooming out your webpage and everything is arranged in a beautiful manner.

Note: Don't forget or ignore the media query part, as these contain the codes which are responsible for the responsiveness of your website.
If you miss that part, then your web page will appear to be distorted and arranged in a haphazard manner while viewing under other resolution devices.

What is responsiveness ??

Now the question which will arise in the mind of some of the newbies or non professionals will be "what is a responsive design ?".
Don't worry !! Its a legit question for the ones who are not interested in using predesigned themes or any platforms (provided by Bootstrap, Jekyll, Wordpress, etc) for the web development.

Responsiveness is a property by which a website can be viewed under any devices (having different resolutions) without straining the user and without distorting the design and content of the webpage.
The device can be anything for example it may be Mobile phones (of varying resolutions), or tablets or flat screen monitors (of varying resolution), etc. And the user must be comfortable in navigating through the contents of the website in any of the mentioned devices.
Nowadays, Most of the professionals as well as business persons only prefer to have a responsive website for their business purpose.
And, the reason is quite obvious, "the increase in number of mobile and tablet users" all over the world. Today, more than 60% of the web users prefer to surf through their pocket postable devices. And hence, to gain more traffic to your website and to make your website popular, you must be having a website which adjust's itself according to the varying resolution of various devices.
So, now I think you got what actually "responsiveness" in terms of web design means !!

What was the actual need to have a centerized website ??

We gone through all the steps needed to have the website contents to be centered. Now, the question is "Was that necessary to have the contents in the center ?" or we just did it for the sake of our satisfaction by watching other website's design on the internet ??
The answer is that it's necessary to have a centerized website because of the following reasons :
  • It gives a good impression to the user about your coding style as well as your personality.

  • If you are applying for the affiliate programs on Google adsense or other affiliate market providing companies, then it's necessary to have a good design to fulfil their quality guideliness.

  • It's not for those who are using any webiste generating platforms such as Jekyll or Wordpress or others because they provide this feature in their themes itself.

  • And at last, obviously it makes a good looking and well arranged website.

Thanks !!

Posted by : Ankit Kumar