center an image in CSS

minazfath · 12-20-2011, 04:48 PM

Hi all,
I am new to Css ,I try to ix a image in center,but it doesn' seems to work.

main.css
-----------

Code:

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

and index.php

Code:

<?php
echo 'Hallo';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<LINK REL=StyleSheet HREF="main.css" TYPE="text/css" MEDIA=screen></link>
<img src="image.png" alt="Suni" class="center" />

It doesn't work in IE but in firefox it works ,what can i do?

thankyou all.

Excavator · 12-20-2011, 04:52 PM

Hello minazfath,
To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto

You are right in making your image display: block; as well.