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

centering blocks vertically

From: Vadim Plessky <lucy-ples@mtu-net.ru>
Date: Thu, 25 Oct 2001 13:38:42 +0000
To: Håkon Wium Lie <howcome@opera.com>
Cc: www-style@w3.org
Message-Id: <20011025100628.91A7B23935@hueymiccailhuitl.mtu.ru>
On Wednesday 24 October 2001 23:51, Håkon Wium Lie wrote:
|   Also sprach Andrew McFarland:
|    > What you are wanting to do is center the text vertically in the middle
|    > of the screen (or window). I don't think CSS `knows' what size the
|    > screen (or window) is.
|
|   MOst of the CSS formatting model deals with elements (and their
|   associated boxes) and not the viewport (a.k.a. window). There is one
|   exeption, though. "Fixed positioning" lets you place elements w.r.t
|   the viewport. Here is a simple example on how to "center" content in
|   the window:
|
|     <HTML>
|     <STYLE>
|     #foo {
|       position: fixed;
|       top: 40%;
|       height: 20%;
|       width: 100%;
|       text-align: center;
|     }
|     </STYLE>
|     <BODY>
|     <DIV id="foo">
|     bar
|     </DIV>
|     </BODY>
|
|   "Fixed positioning is supported by Opera and Mozilla.

Fixed positioning is supported by Konqueror/KHTML as well.

|
|   It's not true centering vertically since the height DIV's content
|   isn't taken into the calulation.
|

Indeed, but thanks for a nice example.
I guess this is a good addition to work-arounds Tantek Celik was speaking 
about.

|   -h&kon
|                 Håkon Wium Lie                          cto °þe®ª
|   howcome@opera.com                  http://people.opera.com/howcome

-- 

Vadim Plessky
http://kde2.newmail.ru  (English)
33 Window Decorations and 6 Widget Styles for KDE
http://kde2.newmail.ru/kde_themes.html
KDE mini-Themes
http://kde2.newmail.ru/themes/
Received on Thursday, 25 October 2001 06:06:32 GMT

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