W3C home > Mailing lists > Public > www-style@w3.org > November 2001

Re: How to vertical align an image?

From: <schinkel@rz.uni-potsdam.de>
Date: Sun, 11 Nov 2001 18:36:15 +0100
Message-Id: <200111111738.fABHcCX11147@persius.rz.uni-potsdam.de>
To: www-style@w3.org
CC: w@tson.dk
11.11.2001 17:22:16, "Thomas Watson" <w@tson.dk> wrote:

>I have a XHTML page (v1.1) where I have only one image. I want this
>image to be displayed in the middle of the browser (both horisontal an
>vertical aligned that is). 
>
>This is my document type:
><?xml version="1.0" encoding="iso-8859-1"?>
><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
>"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
>
>And this is how I try to position my image:
><div style="height: 100%; text-align: center;">
>	<img src="ddjalogo.gif" width="640" height="329" alt="" />
></div>
>
>My style attribute on the div-tag only has a height and a text-align.
>The text-align style centers the image horisontaly. But how to I center
>the image verticaly?
>
>I've been searching the web for quite some time now without even finding
>documents about this problem. Am I missing something here? Or is there
>no way at all to do this?
>
>- Hope some of you can help me :)
>
>/watson
>
>
>
>

Possibly you could use a style tag like this:
	<div style="margin-top: 50%; height: 100%; margin-left:50%;">
	<img src="ddjalogo.gif" width="640" height="329" alt="" />
	</div>
<!-- 
you can also use absolute values (i.e. pt) for positioning, but I would recommend using relative values 
//-->

alternativly "padding left/top" may do the job. 
Consult 
http://www.w3.org/TR/REC-CSS1#margin
or
http://www.w3.org/TR/REC-CSS1#padding

if my information is not enough

Hope I could help you
stefan
Received on Sunday, 11 November 2001 12:38:18 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:11 GMT