Image Dentering

Hello All,

I'm getting stuck on how to get an image to centre inside a DIV.
When a page is displayed in IE,
<div style='text-align:center;'>
<img ... >
</div>
does the job as IE handles the image as if it were text

However in firefox / chrome / safari etc the image sits on the left.
Is there a foolproof centre for the div containing an image?

I have read somewhere about using style='margin:auto;' but that doesn't
seem to work.
Any suggestions welcome.

Cheers

Ron

Ron Barnett wrote on 20 jan 2009 in
comp.infosystems.www.authoring.stylesheets:

Hello All,

I'm getting stuck on how to get an image to centre inside a DIV.
When a page is displayed in IE,
div style='text-align:center;'
img ...
/div
does the job as IE handles the image as if it were text

However in firefox / chrome / safari etc the image sits on the left.
Is there a foolproof centre for the div containing an image?

I have read somewhere about using style='margin:auto;' but that
doesn't seem to work.
Any suggestions welcome.

http://www.google.com/search?q=image+center+margin.auto+css

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

"Evertjan." <exjxw.hannivoort (AT) interxnl (DOT) net> wrote

Ron Barnett wrote on 20 jan 2009 in
comp.infosystems.www.authoring.stylesheets:

Hello All,

I'm getting stuck on how to get an image to centre inside a DIV.
When a page is displayed in IE,
div style='text-align:center;'
img ...
/div
does the job as IE handles the image as if it were text

However in firefox / chrome / safari etc the image sits on the left.
Is there a foolproof centre for the div containing an image?

I have read somewhere about using style='margin:auto;' but that
doesn't seem to work.
Any suggestions welcome.

http://www.google.com/search?q=image+center+margin.auto+css

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Thanks,

I discovered that it was my outer DIV that was moving, which is why the
image appeared to be not centering properly.
I ended up putting
style='padding-left:auto;padding-right:auto;text-align:center;'

in the containing DIV.
The padding makes standards compliant browsers center, while IE responds to
the text-align.

Thanks again.

Ron

Ron Barnett wrote:

I ended up putting
style='padding-left:auto;padding-right:auto;text-align:center;'

in the containing DIV.
The padding makes standards compliant browsers center, while IE responds to
the text-align.

Sounds like you're triggering quirks mode. Use a strict DOCTYPE and
standards mode and you won't have those problems.

--
Berg