Css Centering

[KansukeKojima 0]

Description

Learn to center the content, or other objects of your pages with CSS. This is a useful tool for creating succesful, and well designed web-pages.

Try it out

Create a new .css file called whatever.css. Alright, now input the following lines into your new css document.

 

 

 

#wrapper {margin: 0 auto;width: 800px;}

Alright. Now that was fairly simple. The important part is the 'margin' property. The property is used to define where something is located from the sides of the screen, or from the insides of a container. By using the value 'auto' our page will automatically center itself across the screen. (Note: in this case, the id #wrapper, must contain all the content you wish to center on your page.)

Congratualations, you have just learned to center your pages with CSS. This is a very useful piece of knowledge to have, as it drastically improves the look of fixed width layouts.

[dave2win 0]

You can also do it in a different way. [This is just another process & the above process is also very good].

Suppose you want to center a 900px picture. You link that html file to an external CSS File & copy the following code:--

.center{width:900px;margin-left:-450px;}

Here also the picture is centered with respect to its Parent. THe negative value for the margin tag allows the picture to move 450px in the left as a result it gets centered.

Now just add the class property to the img tag or whatever you want to center and put its value as center. Now you are done. Open the file in a Web Browser and see your creation.

Good Luck with your Project.