...

View Full Version : How To Make Image Vertically/Horizontal Center In DIV?



dealmaker
08-19-2005, 02:19 AM
Hi,
I want to make an image to be both vertically horizontally centered in a DIV area.



#myDiv div img{
border:none;
display:block;
margin: auto auto;
}


It's now horizontally centered, but it's all the way touching the top of the DIV, not vertically centered. I tried manually set "margin: 10px auto;", and it does move the image down a little bit but it's not what I want. I also tried to set all margin like margin-left, margin-top, etc, to auto. But still doesn't work.

How to fix it?

Many thanks.

Dolphin123
08-19-2005, 02:52 AM
For a complete tutorial take a look here (http://www.w3.org/Style/Examples/007/center.html)

dealmaker
08-19-2005, 03:41 AM
I still cannot get it work after following the examples. Do I have to insert a <p> between div and image to get it work? I followed the examples and substitue the <p> with <img> but couldn't get it work.



For a complete tutorial take a look here (http://www.w3.org/Style/Examples/007/center.html)

mrruben5
08-19-2005, 12:02 PM
http://www.csscreator.com/css-forum/ftopic847.html

dealmaker
08-19-2005, 06:40 PM
I did something similar after being frustrated with CSS before your post. But I set margin to auto since hortizontal centering works with CSS. Then I did similar calculation to set only the marginTop. It is more simple.

What a waste, all these code vs a simple 'auto' in CSS.


http://www.csscreator.com/css-forum/ftopic847.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum