...

View Full Version : vertical-align: middle



SeeIT Solutions
08-18-2005, 02:32 AM
I'm trying to center 1 image on a page.

The page only contains the 1 image, how do i get it centered horizontally and vertically using divs?

Thanks

_Aerospace_Eng_
08-18-2005, 05:36 AM
You can't use vertical-align on a block level element. What you can do however is something like this.

<!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>Completely Centered Image</title>
<style type="text/css">
body {
text-align:center;
}
#oneimage {
/*hide from IE Mac\*/
position:absolute;
top:50%;
left:50%;
margin-top:-100px; /*this is half the height of the image*/
margin-left:-100px; /*this is half the width of the image*/
/*end hiding*/
}
</style>
</head>

<body>
<img id="oneimage" src="yourimage.jpg" alt="" width="200" height="200">
</body>
</html>

brothercake
08-18-2005, 10:41 AM
nb - vertical-align is only for table cells, afaik.

mrruben5
08-18-2005, 10:57 AM
If you are trying to center just one image why don't you use background-image, background-repeat and background-position?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum