...

View Full Version : vertical-align not working...



gsnedders
02-10-2005, 09:56 PM
I have the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en_GB">
<head>
<title>F1 Unleashed Version 2 Coming Soon</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="http://geoffers.uni.cc/favicon.ico">
<style type="text/css">
* { margin: 0; padding: 0; }

html, body { background-color: rgb(0, 0, 0); height: 100%; width: 100%; text-align: center; }

img {
vertical-align: middle;
}

div {
height: 100%;
}
</style>
</head>
<body>
<div>
<img src="image.jpg" alt="F1 Unleashed Version 2 Coming Soon">
</div>
</body>
</html>

The image appears in the centre (horizontally) like I want it to, but does not vertically...

Badman3k
02-10-2005, 10:06 PM
It's not exactly the best method if you're gonna be having other things on the page but if this is all that you're gonna have you could use:


div { height: 50%; top: 50%; }

leaving everything else the same will make it appear to be vertically centred.

vertical-align allows you to position surrounding text. It's not where the image appears, but where text appears relative to the image

Just a thought :thumbsup:

rmedek
02-10-2005, 10:12 PM
Centering vertically is tricky sometimes. Here's what I do:

If it's a large div, or one big container div in the middle of the page, I use margins and relative positioning. Say the image (or div) was 100px high...


img {
margin-top: 50%;
position: relative;
top: -50px;
}

... and that scoots it where it needs to be. If it's smaller, contained in a div with content, for example, or you need to center text vertically in a div, I like to use this (let's say you need to center text in a 100px high div)...


#content {
margin: 0 auto;
border: solid 1px #ccc;
width: 500px;
height: 100px;
line-height: 100px;
}

p {
padding: 0;
margin: 0;
}

<div id="content"><p>content content content</p></div>

... having the line-height the same height as the div sets the baseline right in the middle, although whatever's being put there obviously can't have any margins or padding, as that will push it down further. It works for images, too.

Hope this helps,

gsnedders
02-10-2005, 10:33 PM
Thanks rmedek :)

rmedek
02-10-2005, 10:44 PM
no problem :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum