Forum Moderators: open
Height is set to 100% in the body element of my style sheet.
I have a 100% wide <div> that's about 260px high --> and that is the only <div> on the entire page.
Is there anyway that I can center this <div> smack dab in the middle of the page so that there is just as much space up top and below the pictures on any screen resolution.
I remember a javascript that calculated the height of any new window but that centering was still way off.
I thought margin-top/bottom (auto) would work since the body's height property was set, but maybe not.
The example is in my profile if ya have a chance to take a look. I'm trying to make the pics exactly center.
Thanks-
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%;
}
div.v-align {
margin-right:auto;
margin-left:auto;
text-align:center;
margin-top:30%;
}
img {
height:100px;
width:100px;
border:1px solid #000;
}
</style>
</head>
<body>
<div class="v-align">
<img src="bogus.gif" alt="aiming for the middle!" />
</div>
</body>
</html>
You can, of course adjust the padding, but 30% is pretty close. Tested in Opera 6.04 and IE6 - Mozilla rendered closer to the actual 30% margin expected. I didn't have much time to work with it, and I am sure there other approaches, but it should provide somewhere to begin... Let's see what other pure CSS options are available. In the meantime, I'm off to catch some zzzzzzz's! ;)
- papabaer
[edited by: papabaer at 6:45 am (utc) on July 31, 2002]
I'd try to rethink it a little, depends what it's for of course but a vertical div measured in 20% from the left with a width of 100px and height of 100% would hold whatever msg you need quite elegantly also....
is it some kind of notification thingy? like "we have recieved your email...." If so there must be a few more reliable options...
Nick
The second.... way off screen to the right. It's own width of screen and way below the fold vertically.
What did you expect that one to do papabaer? Center perfectly? No chance! ;);)
Nick
<table width="100%" height="100%">
<td align="center" valign="middle">
<div><h1>Your content</h1></div>
</td></table>
Cross-browser centering is one of the areas where CSS is still a cripple and table tags are elegantly simple.
The CSS fix worked nicely in Operal 6, but went haywire on IE6 and elsewhere.
The table fix worked exactly how I needed it to Rhys...
I like to avoid tables and use CSS if at all possible, but, since this is just a splash page - I could live with it.
M
