dcsimg
www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 20

Thread: CSS - Vertical / Horizontal Centering

  1. #1
    Join Date
    Nov 2002
    Location
    Houston
    Posts
    5

    Question CSS - Vertical / Horizontal Centering

    Hi all...

    I need some help, if possible, and this seems like the right forum to post in.

    I'd like to have a graphic and text (in a table) center vertically and horizontally in the browser window. With HTML, I'd normally use the width and height attributes (set at 100%) in a master <TABLE> to do this but XHTML no longer recognizes the height attrib. Any ideas on how to use CSS to now do this?

    Thanks,

    - Michael H.

  2. #2
    Join Date
    Nov 2002
    Posts
    984
    No <table> needed...


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <title>Hor & Vert Center</title>
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <style title="Default" media="screen" type="text/css">
    #center {width:200px; height:100px; position:absolute; top:50%; left:50%; margin:-50px auto auto -100px; border:1px solid black; text-align:center;}
    </style>
    </head>
    <body>

    <div id="center">
    Your centered box.
    </div>

    </body>
    </html>
    Last edited by Stefan; 11-28-2002 at 03:18 PM.

  3. #3
    Join Date
    Nov 2002
    Location
    Houston
    Posts
    5
    Hi Stefan...

    Thanks for your help. It wasn't exactly the solution I was looking for but did get me on the right track. Here's what I have so far. I've removed some irrelevant code for this post.


    <style type="text/css">

    body {
    margin:0;
    padding:0;
    color: #33cccc;
    }

    .hold {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    }

    </style>
    </head>

    <body>
    <div class="hold" align="center"><img src="brand_cov01.gif" alt="Green Cover" name="brandcov" id="brandcov" width="147" height="313" border="0" align="middle"></div>
    </body>
    </html>

    Everything almost works as it's supposed to. The image I have in the div tag is centered horizontally but not vertically. Rather, it's aligned to the top center of the browser window. My overall goal was to have it in the center of a browser window no matter how wide or narrow, etc. Ideas on how to have it vertically in the middle?

    Thanks again,

    - Michael

  4. #4
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by plusonetwo
    My overall goal was to have it in the center of a browser window no matter how wide or narrow, etc. Ideas on how to have it vertically in the middle?
    I have already give the code for exactly that in this thread.

  5. #5
    Join Date
    Nov 2002
    Location
    Houston
    Posts
    5
    Alright... I don't understand XHTML all too clearly yet so bear with me. Your code does work correctly when I copy/paste, however, when I change out what's inside the DIV tag, such as with a graphic, what, if anything, do I have to adjust elsewhere. I say this because, for instance, I put a 349x313 graphic in the DIV and it was pushed off the right side of the browser a bit.

    Thanks,

    - Michael

  6. #6
    Join Date
    Nov 2002
    Location
    Houston
    Posts
    5
    Hmm... never mind. Got the solution in the #center style tag. Thanks, though.

    - Michael

  7. #7
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by plusonetwo
    [B]Alright... I don't understand XHTML all too clearly yet so bear with me.
    Sorry, didn't think it would cause a problem since it's almsot exatly the same as HTML 4.01.
    Just for referance here is a how it would look in "normal" HTML 4.01


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title></title>
    <style title="Default" media="screen" type="text/css">
    #center {width:200px; height:100px; position:absolute; top:50%; left:50%; margin:-50px auto auto -100px; border:1px solid black; text-align:center;}
    </style>
    </head>
    <body>

    <div id="center">
    Your centered box.
    </div>

    </body>
    </html>

    Your code does work correctly when I copy/paste, however, when I change out what's inside the DIV tag, such as with a graphic, what, if anything, do I have to adjust elsewhere. I say this because, for instance, I put a 349x313 graphic in the DIV and it was pushed off the right side of the browser a bit.
    Yes, the values in the #center has to be changed depending on the size of the content you put in there.
    If you only work with inline content, like plain text and images you could also use the shorter CSS (since text-align:center; will center it horizontally anyway)

    #center {width:100%; height:313px; position:absolute; top:50%; left:0; margin:-157px auto auto; border:1px solid black; text-align:center;}

    (also adapted it to the image height, in this case 313px)
    Last edited by Stefan; 11-29-2002 at 03:40 AM.

  8. #8
    Join Date
    Dec 2002
    Location
    South East France
    Posts
    7
    To acheive what I anderstand you want to do, you should combine absolute and relative positioning like :

    <div align="center"><div id="layer33" style="position: relative; left: 0px; width: 826px; height: 136px;">
    <div id="Layer39" style="position: absolute; left: 0px; width: 276px; background: #993399; height: 136px;">

    ...</div></div>

    HTH

  9. #9
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by allier
    To acheive what I anderstand you want to do, you should combine absolute and relative positioning like :

    <div align="center"><div id="layer33" style="position: relative; left: 0px; width: 826px; height: 136px;">
    <div id="Layer39" style="position: absolute; left: 0px; width: 276px; background: #993399; height: 136px;">

    ...</div></div>

    HTH
    What would be the advantage of this code vs what is already in this thread?

    To me it doesn't even seem to be close to what the original posted asked for.
    Are you perhaps forgetting to include the CSS attached with the ID attributes?

  10. #10
    Join Date
    Dec 2002
    Location
    South East France
    Posts
    7
    What would be the advantage of this code vs what is already in this thread?
    The advantage of a position: relative then a position: absolute is that you can put this layers, anyware in your page,not depending of the height of what is above .

  11. #11
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by allier
    The advantage of a position: relative then a position: absolute is that you can put this layers, anyware in your page,not depending of the height of what is above .
    Wouldn't that be a disadvantage in this case, considering the original poster wanted something hor & vert centered on the screen.

    With other content above it, first relative positioning will not make your content vertically centerd on screen.

    I also see other pontential problems with your code example eg width: 826px. That will give a horizontal scrollbar at all resolutions <1024px

  12. #12
    Join Date
    Jul 2006
    Posts
    1
    The first example of Stefan works... untill you shrink the browser window beyond the size of the DIV size.
    The DIV will be kept centered causing the TOP of the DIV to move upward.

    I'd like to know how I can keep the DIV from moving beyond the top boundry of the browserwindow.

  13. #13
    Join Date
    Aug 2006
    Location
    Italy
    Posts
    46
    me too!

  14. #14
    Join Date
    Nov 2006
    Posts
    2

    Horizontally and Vertically Centered No Scrollbars

    I recently wrote an article on this - CSS Vertically and Horizontally Center - does that solve your problem?

  15. #15
    Join Date
    May 2006
    Posts
    135
    The first example of Stefan works... untill you shrink the browser window beyond the size of the DIV size.
    The DIV will be kept centered causing the TOP of the DIV to move upward.
    min-width and min-height

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles