How To Center Element Using CSS

Centring using CSS may be a challenge for a beginner web designer. That is because there are so many different ways to centre a things and not every techniques works on every element. So it is a good idea to learn how centre things using CSS because using HTML <center> tag it becomes difficult sometime. Hence lets start to centre elements with different ways.

How to Centre Elements With CSS:-

Basically there are three things which to be center with CSS.

• Centring a text
• Centring a block
• Centring a image

We will discuss all these one by one.

How to Center a Text Using CSS:-

To centre a text is easiest thing in this tutorial you have to only add following CSS rule in template.

p.center { text-align: center; }

Then any paragraph written with class "center" will be centered horizontally.

<p class="center">This text is centered.</p>

How To Center a Block With CSS:-

Blocks can be of any type which have defined width. The CSS code is as follows.

div.center {   margin-left: auto;   margin-right: auto;   width: 8em; }

And the corresponding HTML code will look like this.

<div class="center">This entire block is centered, but the text inside it is left aligned.</div>

How to Center Images With CSS:-

Images are a little trickier. While most of the browser uses the same text-align property, but it is not a good technique. So lets center a image.

img.center {display: block; margin-left: auto; margin-right: auto;}

And the HTML code will be.

<img src="blwebcam-sample.jpg" alt="Suni" class="center" />

If you enjoyed this article then don't forget to subscribe it for latest updates.
More article from the same author Add Meta Description To Each Post Individually, How to Customize Blogger Comment Form.