Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2002
    Location
    Washington State
    Posts
    98
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question DIV Align Center AND 100px from the top....

    I am trying to get my stuff in the <DIV> tags to align to the center and center of the page. Like 500 right and 500 from top. However not everyone has a 1000 by 1000 window open, so I need it to align center from left and center from top. Any ideas, comments, or suggestions, would greatly be apreciated. Thanks.

    ~Isaac~
    ~ Isaac Lloyd ~
    Website Design & Development
    http://www.IsaacLloyd.com

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    see if this does anything for you:

    Code:
    <html>
    <head>
    <title>centered</title>
    <style type="text/css">
    body, html {height: 100%; text-align: center; overflow: hidden;}
    #outer {height: 100%; overflow: visible; margin: auto auto; position: relative; }
    #outer[id] {display: table; position: static;}
    #middle {position: absolute; top: 50%;} 
    #middle[id] {display: table-cell; vertical-align: middle; position: static;}
    #inner {position: relative; top: -50%; left: -50%} 
    #inner[id] {position: static;} 
    #box {border: 1px solid #ccc; padding: 6px; position: relative; text-align: center;}
    </style>
    </head>
      <body>
       <div id="outer">
        <div id="middle">
         <div id="inner">
          <div id="box">
    
           <p>middle &amp; center</p>
          </div>
         </div>
        </div>
      </div>
     </body>
    </html>

  • #3
    New Coder
    Join Date
    Dec 2002
    Location
    Washington State
    Posts
    98
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That works, but any way to get it NOT tide in with the HTML page? I need a stand alone DIV Style. I can't have all the text on the page centered, etc. Just this DIV box. Thanks for your time.


    ~Isaac~
    ~ Isaac Lloyd ~
    Website Design & Development
    http://www.IsaacLloyd.com

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    you wouldnt happen to have a pge up that we could look at do you?

    are you trying to get the centered box to hover in the center over everything else?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •