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

Re: How to vertical align an image?

From: Boris Zbarsky <bzbarsky@MIT.EDU>
Date: Sun, 11 Nov 2001 12:54:30 -0500
Message-Id: <200111111754.MAA02970@no-knife.mit.edu>
To: schinkel@rz.uni-potsdam.de
cc: www-style@w3.org, w@tson.dk
> 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>

Would this really do the right thing?  The 50% in both cases would be
50% of the window width, no?  This is not really centering...

There was a discussion on this list of vertical centering a ways back.
See http://lists.w3.org/Archives/Public/www-style/2001Oct/0107.html and
its various followups.

I believe your best bet is to create a display:table-cell box positioned
to take up the entire viewport and then center your content vertically
and horizontally in that using vertical-align and text-align.

Boris
-----------------
617-864-9910
-----------------
Wallet [n]: Mythical object rumored to carry
mysterious, disappearing substances referred to as
"money" or "cash" (not to be confused with the C
Shell).  The association of this "money" to real life
is currently being researched by R&D (put Reality in
the Background; Dammit).  Full results are expected
RSN, however, preliminary results indicate that this
substance "money" is often required to obtain such
necessities as computers, pizza, hard drives, caffeine,
a network connection, and resolving the conflict
between ordering the pizza and maintaining your network
connection.
Received on Sunday, 11 November 2001 12:54:38 GMT

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