Jump to content

Archived

This topic is now archived and is closed to further replies.

michaellunsford

Vertical Center?

Recommended Posts

okay, it's centering horizontally -- why isn't it centering vertically?

[code=php:0]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>untitled</title>
<style type="text/css">
html,body {
height:101%;
}
</style>
</head>
<body>
<div style="margin:auto; width:481px; height:327px;"><img src="images/splash.jpg" alt="" width="481" height="327" border="0"></div>
</body>
</html>
[/code]

I've even tried writing a specific "auto" to each margin type (ie, left, right, top bottom). I've also tried giving it a height of 100% and a vertical-align:middle without success. The only thing that does work is making a table 100% high, and valigning a 100% high TD. This really seems like the long way around, though.

What am I missing?

Share this post


Link to post
Share on other sites
hmm... I was really hoping for something that's cross-browser compatible. In fact, I thought my CSS was valid -- apparently I've missed something.

Share this post


Link to post
Share on other sites
You can try the negative margin trick:

[code]
div {
position: absolute;
top: 50%;
left: 50%;
height: 200px;
width: 600px;
margin: -100 -300;
text-align: center;

}
[/code]

Share this post


Link to post
Share on other sites
[quote author=effigy link=topic=106885.msg428651#msg428651 date=1157483067]
You can try the negative margin trick:

[code]
div {
position: absolute;
top: 50%;
left: 50%;
height: 200px;
width: 600px;
margin: -100 -300;
text-align: center;

}
[/code]
[/quote]

Awesome! It works in both IE and Firefox.

Share this post


Link to post
Share on other sites
Hmm... doesn't work in my default browser (Safari). It doesn't compensate for the height of the DIV, it just puts the top at the 50% mark.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.