Jump to content


Photo

Vertical Center?


  • Please log in to reply
5 replies to this topic

#1 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 04 September 2006 - 10:03 PM

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

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

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?

#2 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 05 September 2006 - 02:55 PM

http://www.cssplay.c...exampletwo.html

It only works in IE however.

#3 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 05 September 2006 - 06:42 PM

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.

#4 effigy

effigy
  • Staff Alumni
  • Advanced Member
  • 3,600 posts
  • LocationIL

Posted 05 September 2006 - 07:04 PM

You can try the negative margin trick:

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

	}

Regexp | Unicode Article | Letter Database
/\A(e)?((1)?ff(?:(?:ig)?y)?|f(?:ig)?)\z/

#5 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 06 September 2006 - 04:06 PM

You can try the negative margin trick:

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

	}


Awesome! It works in both IE and Firefox.

#6 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 07 September 2006 - 06:00 PM

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.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users