SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering Horizontally and Vert in Div

    Hello,

    I am trying to create divs for various banner ad sizes. For example, I would like to have a div with a min height of 120 and fixed width of 230. The content or ad inside the div should be centered horizontally and vertically. Of course, with the min height of 120, the div should not be smaller than this height.

    How would I do this?

    Thanks,

    Jon

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Jon,

    You will need to use display:table; to do that in modern browsers. If you need to support IE6/7 then it will require some hacks to make them work off one of their bugs.

    Something like this should get you headed in the right direction

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Vertically Align Elements of Random Height</title>
    <style type="text/css">
    body {
        margin:0;
        padding:0;
        font: 100%/1.3 arial,helvetica,sans-serif;
    }
    h1 {
        margin:0 .5em .5em;
        font-size:1.6em;
        text-align:center;
    }
    /*===== Begin Main Layout ======*/
    #wrapper {
        width:800px;
        margin:20px auto;
        padding:10px;
        border:1px solid #000;
        background:#EEF;
        overflow:hidden; /*contain child floats*/
    }
    .outer {
        position:relative;
        float:left;
        display:table;
        height:300px;/*table display (and IE6) treat height as min-height*/
        width:200px;
        margin:0 10px 0 0;
        vertical-align:middle;
        background:#FFF;
        border:1px solid #000;
    }
    .inner {
        width:100%;
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        position:relative;
    }
    .inner div { /*fluid height ad div*/
        width:150px;
        margin:0 auto;
        background:lime;
    }
     
    </style>
     
    <!--[if lt IE 8]>
    <style type="text/css">
    .outer {min-height:300px;}/*ie7 gets min-height*/
    .inner {top:50%; left:0;}
    .inner div {top:-50%; position:relative;}
    </style>
    <![endif]-->
     
    </head>
    <body>
     
    <div id="wrapper">
        <h1>Vertically Align Elements of Random Height</h1>
        <div class="outer"> 
            <div class="inner">
                <div>This is a block to simulate random height ads. 
                This is a block to simulate random height ads.
                This is a block to simulate random height ads.
                </div>
            </div>
        </div>
    </div>
     
    </body>
    </html>

    If you are not concerned about IE6/7 then this is all you need to do

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Vertically Align Elements of Random Height</title>
    <style type="text/css">
    .outer {
        display:table;
        height:200px;/*table display treats height as min-height*/
        width:200px;
        vertical-align:middle;
        background:#FFF;
        border:1px solid #000;
    }
    .inner {
        display:table-cell;
        vertical-align:middle;
    }
    .inner div { /*fluid height ad div*/
        width:150px;
        margin:0 auto;
        background:lime;
    }
    </style>
    </head>
    <body>
     
    <div class="outer">
        <div class="inner">
            <div>
                This is a block to simulate random height ads.
                This is a block to simulate random height ads.
            </div>
        </div>
    </div>
     
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I have it a shot AthletesWhoTweet - Find NBA, NFL, MLB, NHL and other professional athletes on Twitter! one appears to work, but the other two are not centering. Any ideas?

  4. #4
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, that wasn't really coherent... on my site, the ads are not centering horizontally, can someone please check it out and let me know? I used the above code.

    Thanks,

    Jon

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    May not be the most efficient solution, but you could add this to your CSS:

    Code:
    .innersky img, .innerbot img {display: block;margin: 0 auto;}

  6. #6
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked! Thanks ralph and Rayzur!


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
  •