- 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