Welcome to Our Free Tutorial!

CSS - Center Image

This is a common task for CSS to center images and text. Centering CSS is very challenges for many beginners web designers. This is because so many different way to use center things. But good idea to learn how to center things with CSS.
1. Centering Text.
2. Centering an Image.
3. Centering a block or an image vertically.

CENTERING LINES OF TEXT

This a most very easy and common things and easiest type centering is line of the text in a paragraph or in heading. CSS has the property of ‘text-align’
P { text-align: center }
H2 { text-align: center }
Each line in a paragraph or in a H2 centered.

CENTERING A BLOCK OR IMAGE

Some time you want to insert text as block in a whole we want to left or right margin is equal. We put the Margin value should be ‘auto’

Example:-

P.blocktext {
    margin-right: auto;
    margin-left: auto;
    width: 6em
}
...
<P class="blocktext">Content Here……

This is the also way to center the image into block of its own margin property

Example:-

img.display {
    display: block;
   margin-right: auto }
 margin-left: auto;
   ...
<img class="display" src="..." alt="...">

CENTERING VERTICALLY

CSS 2 does not have support for centering item vertically on the page. There is the way to trick some browsers into displaying the content vertically, but it does not work well.

For example:

.vertcenter {min-height: 13em; display: table-cell; vertical-align: middle; }
And here is the HTML:
<div class="vertcenter"> <p>This text is vertically centered in the box.</p> </div>