Click to See Complete Forum and Search --> : Verticle Alignment


r_barlow
06-02-2006, 06:23 PM
I have a <div> whose purpose is to hold a single image. The <div> width and height is a little bigger than the image and has a border and background and such.

I want to center this image in the <div> section. text-align:center works fine for centering it horizontally.. but for some reason verticle-align:middle doesn't set it in the middle of the area...

WebJoel
06-02-2006, 07:49 PM
I have a <div> whose purpose is to hold a single image. The <div> width and height is a little bigger than the image and has a border and background and such.

I want to center this image in the <div> section. text-align:center works fine for centering it horizontally.. but for some reason verticle-align:middle doesn't set it in the middle of the area...

re: "text-align:center works fine for centering it horizontally.. but for some reason verticle-align:middle"

should/could work, -but that is more for centering blocks of text (ergo "text-align:center")

Try adding this to the IMG that is in this slightly-larger-than-thou-image DIV: style="margin:auto;". This will automatically divide and distribute any 'space' on all four sides of the IMG, centering it quite nicely.

Be sure to include in the first style "body, html {margin:0; padding:0; border:0;}" This will re-set everyting to "zero" and give IE a fighting chance of getting it right. Otherwise, you might end up with a pixel or several pixels of unexpected padding, margin or border...

prowebmaster
06-03-2006, 08:24 AM
hi,

Try vertical-align: middle;

---