DIV in the center of the screen ...

Discussion in 'CSS' started by redhits, Mar 14, 2008.

0
  1. #1
    How i can place a div in the center of the screen

    i want to use CSS for this


    , so i don't want an answer like

    <center><div>Centered text</div></center>
     
    redhits, Mar 14, 2008 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    margin:0 auto; on the DIV should center it in it's parent container, so if the parent is body, that should do it... on the horizontal... Though I'd also toss text-align:center on the body so that IE5 will center it too. (since IE quirks mode ignores auto margin)

    If you want it centered VERTICALLY, that's a giant can of worms. If the DIV is dynamic height, a table is the only real answer. If the DIV is a fixed height, you can do position:absolute; top:50%; margin-top:-100px; where that margin-top is half your height. Just be warned that with the second technique if your DIV is taller than screen height, the top and bottom get chopped off. (this is another situation where a table does something CSS flat out can't do right now)
     
    deathshadow, Mar 14, 2008 IP
  3. redhits

    redhits Notable Member

    Messages:
    3,023
    Likes Received:
    277
    Best Answers:
    0
    Trophy Points:
    255
    #3
    Ok thank you
     
    redhits, Mar 14, 2008 IP
  4. slaydragon

    slaydragon Banned

    Messages:
    1,403
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #4
    slaydragon, Mar 14, 2008 IP
  5. redhits

    redhits Notable Member

    Messages:
    3,023
    Likes Received:
    277
    Best Answers:
    0
    Trophy Points:
    255
    #5
    body {
    background-color:#333344;
    text-align: center;
    height:90%; width:90%;
    }


    .index {
    position:relative;
    background-image:url('back.jpg');
    background-repeat:no-repeat;
    height:525px; width:701px;
    }



    It's not placing it in the middle of the screen!
     
    redhits, Mar 14, 2008 IP
  6. RelevantBuZZ_PR

    RelevantBuZZ_PR Guest

    Messages:
    101
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    What deathshadow posted is the correct way to center an image using fixed dimensions with <div> tags. If it's only the image you want centered then you can try (and these are my codes; copyrighted. :D):

    CSS code:
    
body {
  margin:0 auto; 
  background-color:#333344; 
  } 

#vertical {
  position:absolute; 
  top:50%; 
  left:0; 
  width:100%; 
  margin-top:-1050px; 
  text-align:center; 
  } 

#horizontal {
  position:relative; 
  width:701px; 
  height:525px; 
  margin:0 auto; 
  background:#333344 url(back.jpg) no-repeat top left;
  }
    Code (markup):

    HTML code:

    
<body>
<div id="vertical">
  <div id="horizontal">
  </div>
</div>
</body>
    Code (markup):

    I haven't tested it out but it should work if the screen size allows.
     
    RelevantBuZZ_PR, Mar 14, 2008 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Even if you copywrited them, Paul O'Brien has already done the same technique (dual-container for centering both ways) and has released it as GPL : )

    He's got many pages with many techniques... here's another one which is a little more stable: http://pmob.co.uk/pob/hoz-vert-center.htm
     
    Stomme poes, Mar 15, 2008 IP
  8. RelevantBuZZ_PR

    RelevantBuZZ_PR Guest

    Messages:
    101
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Two different set of codes that do the same thing. ;) I think mine is better. :)

    Regardless, my voicing of copyright was actually a joke (*Note: --> :D), even when it is. :)
     
    RelevantBuZZ_PR, Mar 15, 2008 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    ^ I totally missed it, sorry : )
     
    Stomme poes, Mar 17, 2008 IP
  10. redhits

    redhits Notable Member

    Messages:
    3,023
    Likes Received:
    277
    Best Answers:
    0
    Trophy Points:
    255
    #10
    by the way it's only working for position relative for a main div...
     
    redhits, Mar 17, 2008 IP
  11. RelevantBuZZ_PR

    RelevantBuZZ_PR Guest

    Messages:
    101
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #11
    If you want, I could work up a code. I don't need your image but I will need the image size (is it 701x525px?). I also need to know if your image is used as a background or is it a clickable link? Is it for an opening page? If so, with text or without?

    I'm also curious how you're coding. Strict, Transitional and so forth.
     
    RelevantBuZZ_PR, Mar 17, 2008 IP
  12. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Plus, what you've currently got:
    
body {
background-color:#333344;
text-align: center;
height:90%; width:90%;
}


.index {
position:relative;
background-image:url('back.jpg');
background-repeat:no-repeat;
height:525px; width:701px;
}
    Code (markup):
    doesn't have any centering going on at all except for IE5.5 and under (the text-align: center is only for IE in Quirks mode or older IE... it's an extra, not the main centering).
    Where's your margin: 0 auto?
     
    Stomme poes, Mar 18, 2008 IP