Welcome to WebmasterWorld Guest from 54.167.153.63

Forum Moderators: not2easy

Message Too Old, No Replies

Vertical centering of DIV

   
3:04 am on Sep 13, 2006 (gmt 0)

10+ Year Member



When a user clicks a button (such as to upload an image) I would like to overlay a DIV that is vertically aligned in the middle of the page that shows feedback (i.e. "Uploading...Please wait").

I'm clueless, I was thinking maybe displaying the container div as a table, and using vertical-align, but i'm not sure this will do it.

Any ideas?

3:42 am on Sep 13, 2006 (gmt 0)

10+ Year Member



If it's fixed-width, fixed-height, this can be done quite easily.

You want it positioned over the top of everything else, so:

  1. fix the width and the height of the
    div
    ;
  2. absolutely position;
  3. set
    left
    and
    top
    to 50%;
  4. set negative margin which is half the amount (e.g. if width = 600px, height = 300px, set
    margin-left
    = -300px,
    margin-top
    = -150px); and
  5. set your
    z-index
    higher than your other elements, to position it above everything else.

That's it :)

 

Featured Threads

Hot Threads This Week

Hot Threads This Month