Proper way to Center an Image?

What is the proper way to center an Image using CSS?

What about right-alignment?





Is that image background or element?

Is it in a sprite or not?

[QUOTE=itmitică;5094730]Is that image background or element?

Is it in a sprite or not?[/QUOTE]

It is an element I suppose. I dunno. It is just a photo of me on a page?!


Hi Debbie,

If it is an img element then they are inline elements and their alignment is controlled in the same way that text-alignment controls the alignment of text by using text-align on the parent. (text-align:center (or left/right)).

Just add text-align:center to the block level parent that holds the img and it will be centred.

Alternatively you could set the image itself to display:block and then it will center with margin:auto.

You can’t vertically align block elements (unless you are using the display:table structures). You can only vertically align inline elements (or inline-block elements) but only in respect of other content on the same single line (vertical-align:middle etc).

It all depends on why you are trying to accomplish as to which method is best.

Okay, thanks Paul!