verticle-align:middle not working

kanoorani · April 27th, 2009, 01:52 AM

As you can see I've put vertical-alignt:middle but it doesn't seem to be working.

Any single or multiple line text and/or image(s) may appear here, so don't tell me to put line-height:300px, neither tell me to put display:table-cell as it won't work in IE.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.div
{
	width:300px;
	height:300px;
	border:solid 1px #000000;
	background:#FFFF00;
	text-align:center;
	vertical-align:middle;
}
</style>
</head>

<body>
<div class="div">
	<p>As you can see I've put <strong>verticle-alignt:middle</strong> but it doesn't seem to be working.</p>
	<p>Any single or multiple line text and/or image(s) may appear here, so don't tell me to put <strong>line-height:300px</strong>, neither tell me to put <strong>display:table-cell</strong> as it won't work in IE.</p>
</div>
</body>
</html>