- From: Vadim Plessky <lucy-ples@mtu-net.ru>
- Date: Thu, 25 Oct 2001 01:58:46 +0000
- To: Chris Casciano <10sball@placenamehere.com>, "'www-style@w3.org'" <www-style@w3.org>
On Wednesday 24 October 2001 16:34, Chris Casciano wrote: | on 10/24/01 11:59 AM, Peter Foti (PeterF) at PeterF@SystolicNetworks.com | | wrote: | > This is something I don't understand. If CSS doesn't "know" what the | > size of the screen is, then how can it center horizontally? I've never | > understood just why there is such a lack of support for vertical | > alignment, yet there's no problem with horizontal alignment. They | > should be treated the same in my opinion. | > | > I don't know how Jesse would want to use it, but I can imagine wanting | > to use it to put something in the center of a page. | > | > Peter | | Peter, i understand your frustration, so let me try and clarify what is | taking place here. What we have is a clash between the ones mental model | of the page and the actual model of the document. | | With small document (one that doesn't fill up the browser window) set a | border of a few pixels on the body. This should show what you're dealing | with. The *body* is as wide as the window, but only as tall as it needs | to be. This is not 100% correct. You are speaking about 'block' element, but 'inline' element (SPAN) is as wide as its contest. so if you have <BODY><SPAN>some text</SPAN></BODY> 'some text' will not be 100% of the window width. BTW: it also illustrates problem with inheritance for inline element's width/height. (AFAIK, it's not inherited) Partial (and wise ) solution for this problem is to use {display: inline-box } which apparently *can* have 'width' and 'height' |This is often times shorter then the height of the browser window | itself. The minimum height of the document is not the browser height. It's | because of this that centering a box (div) inside of the containing box | (body) would not center it in the "box" that is the browser opening. | Therefore, in reality, CSS doesn't know about the height *or* the width of | the browser, it just happens that the width of the document IS the width of | the browser. you can use <DIV id="cont" style="width:200px;height:200px"> <DIV id="centerme" style="width:100px;height:60px;margin-left:auto;margin-right:auto">how to center this block vertically?</DIV> </DIV> as a container, and put block to center inside it - see example above. for 'cont' block, both width and height are known. | | Now, i'll withhold any comments on whether I think this is the right | approach, I will just say that I've seen *a lot* of folks not expecting | it to work this way (or wanting it to work differently). You can count me, too :-) -- 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 Wednesday, 24 October 2001 18:11:38 UTC