How to center divs in the center

Discussion in 'HTML & Website Design' started by sam.mdy, Nov 9, 2011.

0
  1. #1
    I made a web page using the divs, the problem that i'm facing is that i can't center it, the div's positions change from a screen to another
    I used this method:
    body {[/COLOR]
[COLOR=#ff0000]  margin:0 auto; [/COLOR]
[COLOR=#ff0000]  background-color:#333344; [/COLOR]
[COLOR=#ff0000]  } [/COLOR]
[COLOR=#ff0000]
[/COLOR]
[COLOR=#ff0000]#vertical {[/COLOR]
[COLOR=#ff0000]  position:absolute; [/COLOR]
[COLOR=#ff0000]  top:50%; [/COLOR]
[COLOR=#ff0000]  left:0; [/COLOR]
[COLOR=#ff0000]  width:100%; [/COLOR]
[COLOR=#ff0000]  margin-top:-1050px; [/COLOR]
[COLOR=#ff0000]  text-align:center; [/COLOR]
[COLOR=#ff0000]  } [/COLOR]
[COLOR=#ff0000]
[/COLOR]
[COLOR=#ff0000]#horizontal {[/COLOR]
[COLOR=#ff0000]  position:relative; [/COLOR]
[COLOR=#ff0000]  width:701px; [/COLOR]
[COLOR=#ff0000]  height:525px; [/COLOR]
[COLOR=#ff0000]  margin:0 auto; [/COLOR]
[COLOR=#ff0000]  background:#333344 url(back.jpg) no-repeat top left;[/COLOR]
[COLOR=#ff0000]  }
    Code (markup):


    But it didn't worked as well.

    I will appreciate it if any one could help
    Thank you for your time
    Cheers
     
    Last edited: Nov 9, 2011
    sam.mdy, Nov 9, 2011 IP
  2. Djoram

    Djoram Member

    Messages:
    57
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    26
    #2
    i don't really understand what you are trying to say, so you just want to center 1 div? or do you wanna center #horizontal and #vertical?
     
    Djoram, Nov 9, 2011 IP
  3. sam.mdy

    sam.mdy Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I made many divs on the same page, and I need to put them all in one single div so all the divs will be on the center of the page
    I didnt know how to explain hope its more clear now. thank you for your reply dude, hope to hear from you
     
    sam.mdy, Nov 9, 2011 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,841
    Likes Received:
    4,543
    Best Answers:
    123
    Trophy Points:
    665
    #4
    I'm doing one at the moment this is what I've done

    <html>
<head>
<style>
body {    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #949599;
}

#wrapper {
    width: 950px;
    text-align: left;
    margin: 0 auto;
    border: 1px solid #66696D;
    background-color: #FCFAFA;
    padding: 0 20px 20px 20px;
}
</style>
</head>
<body>
<wrapper>
<!-- all content goes in here
</wrapper>
</body>
</html>
    Code (markup):
     
    sarahk, Nov 9, 2011 IP
  5. atomic2797

    atomic2797 Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    this is what i do on my website:

    body {
    text-align: center;
    }

    #shell {
    text-align: left;
    width: 980px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    }

    BODY will center the content on the page and then the SHELL div returns al the content to justify left. look at my site: golfersforeplay.com is that centering the same way as you are trying to do?
     
    atomic2797, Nov 9, 2011 IP
  6. sam.mdy

    sam.mdy Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I will try it thank you for your help

    Cheers
     
    sam.mdy, Nov 10, 2011 IP
  7. burminsky_pv

    burminsky_pv Peon

    Messages:
    78
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Could you show your html?
     
    burminsky_pv, Nov 10, 2011 IP
  8. premium-theme

    premium-theme Peon

    Messages:
    35
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    horizontal and vertical align a div on the page

    #wrapper {
    width: 701px;
    height: 525px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -350.5px;
    margin-top: -262.5px;
    }


    just horizontal

    #wrapper {
    width:701px;
    margin-left:auto;
    margin-right:auto;
    }

    hope it helps...

    also you may need/want
    body,html {width:100%;height:100%; overflow:hidden;}
     
    Last edited: Nov 10, 2011
    premium-theme, Nov 10, 2011 IP