Back Home

Open Designs

Community. Driven.

Designer Talk: Vertically aligning an Image in a DIV

Bottom of Page

1 to 5 of 5

  1.  
    •  
      CommentAuthorpogy366
    • CommentTimeDec 6th 2006
     
    i know i deserve to be kicked down a flight of stairs for not knowing this one, but for the life of me i can't figure it out on my own.

    i want to have an image that is 104 pixels high, vertically centered in a DIV that has it's height set at 143 pixels. How on earth can i do this? confused
  2.  
    something like this should work:


    <!-- HTML -->

    <div id="box">
    <img id="centerimage" src="image.jpg" />
    </div>


    /* CSS */

    #box { height:143px; position:relative }
    #centerimage { height:104px; margin:-52px 0 0; position:relative; top:50% }
    •  
      CommentAuthorpogy366
    • CommentTimeDec 6th 2006
     
    thanks christopher - for some reason that didn't quite do the trick, but i shot gunned it until i was able to shift the image in to place. confused
    •  
      CommentAuthorChristopher
    • CommentTimeDec 6th 2006 edited by Christopher on the 06th December 2006 at 12:41:19 EST
     
    ok... it does work... its not dead center, because your trying to center something inside a div with an odd number, but it does work...

    /* edit: example */
    •  
      CommentAuthorsnop
    • CommentTimeDec 6th 2006
     
    I usually set the image as a background and then vertically centre it that way....what with vertical-align being a usually piece of crap attribute.

1 to 5 of 5

  1.