SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Non-Member
    Join Date
    Aug 2002
    Location
    USA
    Posts
    544
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hor & ver centering of div's content

    I'm trying to have content within a <div> centered both horizontally and vertically. Something like:

    Code:
    <div height=100 width=800>
      <div align=center valign=center height=50 width=500>
        text text text <img src="sdf.jpg">
      </div>
    </div>
    But there's no "valign" attribute for <div>. I don't really see anything in CSS that might do it either.

  2. #2
    SitePoint Addict Huscy's Avatar
    Join Date
    Jul 2002
    Location
    Newcastle, UK
    Posts
    318
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Here's an example of how to centre an element vertically and horizontally within another element.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body{
     text-align:center;/*for ie5*/
    }
    .outer {
     position:relative;
     height:100px;
     width:800px;
     background-color: #CCCCCC;
     margin-left:auto;/*centre for compliant browsers*/
     margin-right:auto;/*centre for compliant browsers*/
     text-align:left;/*counteract text centre body hack*/
     border:1px solid #000;
     }
    .inner {
     position:absolute;
     height:50px;
     width:500px;
     top:50%;
     left:50%;
     margin-left:-250px;
     margin-top:-25px;
     background-color: #FFFFCC; 
    }
    .text{
     text-align:center;
     margin-top:16px;
     border:1px solid #000;
    }
    </style>
    </head>
    <body>
    <div class="outer">
    <div class="inner">
    <div class="text">Inner text</div>
    </div>
    </div>
    </body>
    </html>
    For explanations have a look at some of these threads as well.

    http://www.sitepointforums.com/showt...vertical+align
    http://www.sitepointforums.com/showt...vertical+align
    http://www.sitepointforums.com/showt...vertical+align
    http://www.sitepointforums.com/showt...vertical+align

    Hope that helps.

    Paul


Bookmarks

Posting Permissions

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