Centering Horizontally and Vert in Div

HTML & CSS
1

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

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 :wink:


<!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

<!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

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

That worked! Thanks ralph and Rayzur!

5

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

6

May not be the most efficient solution, but you could add this to your CSS:

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