Previous Message
Next Message

How to vertically center img in div?

Sent by Steve Clay on 22 September 2004 00:12


Tuesday, September 21, 2004, 2:15:26 PM, Roger wrote:
RM> How can I vertically center an image in a div? I know I could hard code
RM> margin top and bottom values, but in my case I never know the exact size of
RM> the image, so I need to "automate" the centering, much like margin:auto

http://mrclay.org/web_design/centered_image/
* fairly cross-browser
* container must have a fixed-height for IE5.5+/win

Basic construction:
<div id="centerIt"><img ... /></div>

..centerIt {
   border:1px solid;
   width:200px; height:200px;
   text-align:center;
   display:table-cell;
   vertical-align:middle;
}
..centerIt img {
   vertical-align:middle;
}
* html .centerIt {
   font-size:178px; /* you must find IE's magic number for a given height */
}

Steve
-- 
http://mrclay.org/ : http://frenchhorns.mrclay.org/

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: