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

02-10-2005, 10:56 PM
I have the following code:
<html lang="en_GB">
<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%;
<img src="image.jpg" alt="F1 Unleashed Version 2 Coming Soon">

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

02-10-2005, 11: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:

02-10-2005, 11: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,

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

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