Vertical-align

HTML & CSS
1

I’m having trouble vertical-aligning an element inside a div for the simple reason that you cannot give a div a height of 100%… I have a wrapper div right inside <body> & I want it to be same height as window-height, is this possible? it seems to me it should be possible with height:100%, then image could be vertical-align:middle… (img is about 600px high, it’s the only element on the page… I want it to be centered on the page, both horizontally and vertically… how do I do this…)

thank you…

2

(img is about 600px high, it’s the only element on the page… I want it to be centered on the page, both horizontally and vertically… how do I do this…)
Hi maya, :slight_smile:

If your image is the only element on the page I would be inclined to use Paul’s “Easy Vertical Centering” method.

The updated method uses a float and it is discussed about half way down the page as “The Fix”.

You could just set the static #hoz div to the same size as your image and it should work out fine. You could even set your image as a BG image on that div.

The #vertical float div sits on it’s own above the #hoz (content) div and controls the vertical centering, view the page source of the link below for details.

Here is the live example of the float method.

Drag your browser window around and you will see that it does just what you are wanting.

3

Vertical alignment is tricker then it seems, you can look at this :slight_smile:
http://www.pmob.co.uk/temp/vertical-align.htm

4

thank you… the method you post
(http://gtwebdev.com/workshop/vcenter/vcenter-inline-css.php) seems like a fairly simple one… BUT: how do I set the containing div to same height as browser window???

this is what I have now:

<div id=“wrapper”>
<img src=“images/img.gif” width=“600” height=“600” alt=“imgTest”/>
</div>

CSS:
body { margin:0; }
#wrapper { display: table; margin:0 auto; width:600px; height:100% ;}
img {display: table-cell; vertical-align: middle; }

but img is up against top edge of browser window…

thank you…

5

The method I showed you earlier is actually easier and it does not rely on display:table; which is not supported by IE6/7.

Give this a try, I have set your image name and dimensions on it. :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>Easy Vertical Centering To Browser Viewport</title>

<style type="text/css">
html,body{
    height:100&#37;;/*reference for v-float height*/
    margin:0;
    padding:0;
}
body{
    background:#FFF;
    min-width:800px;
    min-height:600px;/*set min-height same as #img-wrap total height*/
}
#v-float{
    float:left;
    height:50%;
    margin-top:-300px;/*half of #img-wrap total height*/
    width:100%;
}
#img-wrap {
    clear:both;
    width:600px;
    height:600px;
    margin:0 auto;
    background:#BBB url(images/img.gif) no-repeat;
    overflow:auto;/*establish margin clearance and insure access to content*/
}
h3 {
    margin:1em;
    text-align:center;
}

</style>
</head>
<body>

<div id="v-float"></div>
<div id="img-wrap">
    <h3>The image is set as a background image on this div</h3>
</div>

</body>
</html>
6

yes, this method works indeed!! :slight_smile:

thank you very much…