Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Senior Member GeZe's Avatar
    Join Date
    Dec 2003
    Posts
    330
    Member #
    4381
    How do you centre div's horizontally and verticlly?

    I have one div that is the parent of all the other divs in a sort of box thing. I want to centre it completly.
    -GeZe

  2.  

  3. #2
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Because of IE, you cannot center anything vertically (to the browser window).
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  4. #3
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    actually you can center/position vertically as well as horozontally.. here is one method I use.
    HTML Code:
    div {
      position: absolute;
      height: 100px;
      width: 100px;
      top: 50%;
      left: 50%;
      margin-left: -50px;
      margin-top: -50px;
      border: 1px solid #555;
    }
    Absolute positioning will do the trick. Just make sure its outside of any other positioned containers so it will default to the browser window. You must have a static value for width and hight set for this to work, I used 100px for both. Then you set the left edge of your container to start half way across the browser screen(left: 50%), and back it up HALF of your width(margin-left: -50px). You then do the same for the vertical positioning. Set the top edge to start half way down your screen, then back it up half of your height. And thats it.

    The border is used to prevent your div from disappearing off the screen, it is not nessessary.


  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Glyakk,

    Very smart trick. I hadn't thought of that one!

  6. #5
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Ahh, I hadn't thought of that either. Nice one dude
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  7. #6
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    I must correct myself.. adding the border will NOT prevent the container from vanishing off the browser window.. That has to do with another method of centering horozontially using 'margin: 0px auto;'. I have still have not found a way to prevent this. But I am working on it!! But just so everybody knows this method works I have posted an example.

    If you dont know what I mean by the container vanishing, take the example I have and shrink your browser, you will notice that the box dissappears off the top and left of the screen if you shrink it enough.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:07 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com