473,881 Members | 1,644 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to center vertically ?

FL
Hi Everyone,

I know howto center a block using
margin-left: auto ;
margin-right: auto ;

but I'm trying to center vertically a box, any idea to solve this?
Jul 20 '05
27 9270
DU <dr*******@hotW IPETHISmail.com > wrote in
<bv**********@n ews.eusc.inter. net>
Sorry about that.
No, my misunderstandin g :)
That page
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
by the way has a problem. Every div in that page is absolutely
positioned and won't work accordingly in Opera 7.x. If the page has
non-abs. pos. elements before and after the centered div, then it
won't work in opera 7.x. In any case, the problem is that both MSIE 6
and Mozilla have a bug on abs. pos. elements:

"Bug 105286: viewport used as containing block for absolutely
positioned elements instead of root (percentage height, %, bottom)"
http://bugzilla.mozilla.org/show_bug.cgi?id=105286

"A positioned element should be positioned to the nearest containing
positioned element, not the containing element."
http://www.w3.org/TR/2003/WD-CSS21-2...suren.html#q28
"The containing block for a positioned box is established by the
nearest positioned ancestor (or, if none exists, the initial
containing block)"

So an abs. pos. child of the body element should be positioned
regarding the document, not the viewport according to W3C. AFAIK,
only Opera 7.x avoids this bug.

My solution (with position:fixed) will work for Opera 7.x and
Mozilla-based browsers and it will work if the document (or positioned
div) exceeds browser viewport dimensions.


I'll revisit it and try it out though I'll confess that I suspect that there
isn't a satisfactory solution - principally because, if there were, there'd
be thousands of sites out there crippling their content and function for the
sole benefit of floating in the middle of the window.
--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

Jul 20 '05 #21
In article DU wrote:
Lauri Raittila wrote:
In article DU wrote:
Lauri Raittila wrote:

CSS has many ways to do [vertical centering].
http://www.student.oulu.fi/~laurirai/www/css/middle/
Your page is interesting. Your last section is wrong though. When one
abs. pos. a child element of the body, the positioning element becomes
the root element

I don't use absolute position relative to body on that page, so I wonder
what you mean.


This is your last section:
"Using absolute positioning and negative margin"
no?


No. There is div with position:relati ve that contains absolutely
positioned element. The absolutely positioned element is positioned
relative to that div. So weather we agree on how ICB is handled is
irrelevant.
I wonder why everybody always think that vertical centering is only used
related to viewport.


Well, I fail to see what usage you could find in positioning an element
in the middle of the document (when the document overflows the
viewport). That would mean that sometimes you see the positioned
element, sometimes you don't; you would need to scroll down/up the
document view to see that abs. pos.


Why on earth it should be positioned middle of document? That would be
even dumber. What I mean is that you sometimes have reason to have
something positioned in the middle of some fixed height element.

Think that you have background image that looks good at some height. You
propably want to position text in the middle of it.
IMHO it hardly ever makes sence to center something
on viewport (even if I have pointed out how to do it many times).
You can replace frames entirely with positioning relative to viewport.
Sidebar, footer, fixed nav. blocks etc... are doable without any frames.


I can see no reason to do that in first place. Replacing frames with
similar stuff is almost as bad idea as frames per se. Often worse.
You mean the thing is centered, but part of it will be outside canvas.
Canvas meaning area you can see using scrollbars.


W3C does not define canvas in that manner. What you say is not clear. Say:
div#idText {position:absol ute; top:-250px; left:-500px;}
Now, this idText won't be reachable, accessible with scrollbars:
depending on your definition of canvas, you would say that this idText
is not part of the canvas since you can't reach it with scrollbars while
the W3C says: "the space where the formatting structure is rendered; the
canvas is infinite for each dimension of the space."
"The canvas is the entire 'surface' on which the document is laid out."
So, I'm not sure why this idText would not part of the canvas the way
W3C defines it.


I don't care how W3 defines it. It still is inaccessible. I defined
canvas myself exactly because I didn't mean it the way W3 does it.
overflow:auto makes sense but I fail to see why max-height is needed or
height:100% is needed.
Well, if you centered thing is bigger than viewport, it doesn't not help
to have scrollbar in it, as it still is bigger than viewport.
The demopage I provided works and it works IMO
according to the way W3C defined position:absolu te, containing blocks
and position:fixed.


Yes it does. That no way means it is not problem. Just because something
is rendered correctly by spec does not mean it makes some sence.

I think you are misunderstood everything I have said because you have so
strong opinion that my understanding of ICB is wrong. The problem is that
question about ICB is irrelevant when talking about my page.

And your example is simply unaccessible in not high enaugh window. Of
course in your example it is not really problem, as centered element is
not very tall. But potential problem is big. Think that someone takes
your example and actually uses it to position her 82 line poem in the
middle of page. Then think someone using big fonts and relatively low
window.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #22
DU
Lauri Raittila wrote:
In article DU wrote:
Lauri Raittila wrote:

In article DU wrote:
Lauri Raittila wrote:
>CSS has many ways to do [vertical centering].
>http://www.student.oulu.fi/~laurirai/www/css/middle/

Your page is interesting. Your last section is wrong though. When one
abs. pos. a child element of the body, the positioning element becomes
the root element
I don't use absolute position relative to body on that page, so I wonder
what you mean.
This is your last section:
"Using absolute positioning and negative margin"
no?

No. There is div with position:relati ve that contains absolutely
positioned element. The absolutely positioned element is positioned
relative to that div. So weather we agree on how ICB is handled is
irrelevant.

I wonder why everybody always think that vertical centering is only used
related to viewport.


Well, I fail to see what usage you could find in positioning an element
in the middle of the document (when the document overflows the
viewport). That would mean that sometimes you see the positioned
element, sometimes you don't; you would need to scroll down/up the
document view to see that abs. pos.

Why on earth it should be positioned middle of document?


That is what people do in a number of demo pages actually. Because the
document is as long as the viewport, then they assume that abs. pos. is
relative to viewport. Here's one:
http://nontroppo.org/test/Op7/position1.html

That would be even dumber.
This is another ball game. Relevancy and/or usage in a webpage context
is a different issue. It seems that right now, you and I do not even
agree that position:absolu te will position a child element of the body
within the document while position:fixed will position a child element
of the body within the viewport. I'm telling you again that the CSS2
technical recommendation is utterly clear, shining clear on this issue.
Opera 7.x gets it right; Mozilla 1.x gets it wrong.

What I mean is that you sometimes have reason to have something positioned in the middle of some fixed height element.

Think that you have background image that looks good at some height. You
propably want to position text in the middle of it.

IMHO it hardly ever makes sence to center something
on viewport (even if I have pointed out how to do it many times).
You can replace frames entirely with positioning relative to viewport.
Sidebar, footer, fixed nav. blocks etc... are doable without any frames.

I can see no reason to do that in first place. Replacing frames with
similar stuff is almost as bad idea as frames per se. Often worse.


That's certainly debatable. Sidebar, footer, nav. blocks fixed in the
viewport are appearing in webpages now. "Authors may use fixed
positioning to create frame-like presentations."
http://www.w3.org/TR/CSS2/visuren.ht...ed-positioning
The usabilities burden, javascript dependency and problems arisen with
frames (which are well documented) disappear when using
fixed-in-the-viewport blocks. Anyway, this is again another topic.
You mean the thing is centered, but part of it will be outside canvas.
Canvas meaning area you can see using scrollbars.


W3C does not define canvas in that manner. What you say is not clear. Say:
div#idText {position:absol ute; top:-250px; left:-500px;}
Now, this idText won't be reachable, accessible with scrollbars:
depending on your definition of canvas, you would say that this idText
is not part of the canvas since you can't reach it with scrollbars while
the W3C says: "the space where the formatting structure is rendered; the
canvas is infinite for each dimension of the space."
"The canvas is the entire 'surface' on which the document is laid out."
So, I'm not sure why this idText would not part of the canvas the way
W3C defines it.

I don't care how W3 defines it. It still is inaccessible. I defined
canvas myself exactly because I didn't mean it the way W3 does it.

overflow:au to makes sense but I fail to see why max-height is needed or
height:100% is needed.

Well, if you centered thing is bigger than viewport, it doesn't not help
to have scrollbar in it, as it still is bigger than viewport.

The demopage I provided works and it works IMO
according to the way W3C defined position:absolu te, containing blocks
and position:fixed.

Yes it does. That no way means it is not problem. Just because something
is rendered correctly by spec does not mean it makes some sence.


My post was oriented toward how specs distinguish, separate and define
how these position:absolu te and position:fixed should work. Whether web
authors do a fine job of designing a page with such knowledge or not is
a different matter. My post was about specs, not about how design meets
specific webpage requirements.
As far as I'm concerned, many people are still assuming there is a bug
with Opera 7.x and no bug with Mozilla regarding pos. abs. when the
specs (1) and even bugzilla (2) clearly indicate it is not the case.

DU
--
(1)http://www.w3.org/TR/2003/WD-CSS21-2...suren.html#q28
"The containing block for a positioned box is established by the nearest
positioned ancestor (or, if none exists, the initial containing block)"
Also, the explanations and examples given in section 10.1 of CSS2.1 are
shining clear about these important distinctions.
"the box is fixed with respect to the viewport"
http://www.w3.org/TR/CSS2/visuren.html#propdef-position
"Fixed positioning is a subcategory of absolute positioning. The only
difference is that for a fixed positioned box, the containing block is
established by the viewport."
http://www.w3.org/TR/CSS2/visuren.ht...ed-positioning
(2)"Bug 105286: viewport used as containing block for absolutely
positioned elements instead of root (percentage height, %, bottom)"
http://bugzilla.mozilla.org/show_bug.cgi?id=105286
Jul 20 '05 #23
In article DU wrote:
This is another ball game. Relevancy and/or usage in a webpage context
is a different issue. It seems that right now, you and I do not even
agree that position:absolu te will position a child element of the body
within the document while position:fixed will position a child element
of the body within the viewport. I'm telling you again that the CSS2
technical recommendation is utterly clear, shining clear on this issue.
Opera 7.x gets it right; Mozilla 1.x gets it wrong.
I have used Opera 7 all the time. Well, I only used 7.0 beta 1 for
testing.
My post was oriented toward how specs distinguish, separate and define
how these position:absolu te and position:fixed should work. Whether web
authors do a fine job of designing a page with such knowledge or not is
a different matter. My post was about specs, not about how design meets
specific webpage requirements.
Yes. You accused that my last case was incorrect:

"Your page is interesting. Your last section is wrong though."

But couldn't point how. You thought that ICB had something to do with it,
but it hasn't.

Your example was not good in practice, and you didn't point it out, so I
did that. I have posted similar example here about 1.5 years ago, and I
didn't understand the problem with it then.
As far as I'm concerned, many people are still assuming there is a bug
with Opera 7.x and no bug with Mozilla regarding pos. abs. when the
specs (1) and even bugzilla (2) clearly indicate it is not the case.


I'm not. I think Opera 7 has done this correctly all the time about ICB.
But the problem you see on my site where I say Opera is buggy and mozilla
is not is not about ICB, but absolutely positioned element in relatievly
positioned container, that is defined even clearer.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #24
DU <dr*******@hotW IPETHISmail.com > wrote:
http://www.w3.org/TR/2003/WD-CSS21-2...suren.html#q28
"The containing block for a positioned box is established by the nearest
positioned ancestor (or, if none exists, the initial containing block)"

So an abs. pos. child of the body element should be positioned regarding
the document, not the viewport according to W3C. AFAIK, only Opera 7.x
avoids this bug.


That is correct. (Opera avoided this bug by never inventing it, Since
CSS positioning was first included in Opera, they've been the only
ones to get this detail correct.)

But the way you phrase that, by referring to, "an abs. pos. child of
the body," may be misleading. The first element to be absolutely
positioned will be positioned relative to the initial containing box,
not the viewport, but that may be the BODY element or the HTML
element. And if an author assumes that it is the BODY, that assumption
may be wrong.

The initial containing box, IIRC, is the first box in the rendering
model to have a value for "display" other than "none".[1] And the
rendering model is created by reconciling the document tree with the
stylesheet in use. And the stylesheet in use is created by cascading
stylesheets from author, user, and browser.

In plain English, if I have a user stylesheet that always displays the
META tags (I do, BTW), my initial containing box will always be HTML,
never BODY. So, if the author asssumes an initial containing box of
BODY, their absolutely positioned element may be displaced upwards?
Would these be appropriate for authors with a genuine use for absolute
positioning?

html { display: block !important }
head { display: none !important }

[1] Or a value for "content" other than "" (That's content in the
rendering model, not the content of the document model.)???

--
Karl Smith.
Jul 20 '05 #25
DU
Lauri Raittila wrote:
In article DU wrote:

This is another ball game. Relevancy and/or usage in a webpage context
is a different issue. It seems that right now, you and I do not even
agree that position:absolu te will position a child element of the body
within the document while position:fixed will position a child element
of the body within the viewport. I'm telling you again that the CSS2
technical recommendation is utterly clear, shining clear on this issue.
Opera 7.x gets it right; Mozilla 1.x gets it wrong.

I have used Opera 7 all the time. Well, I only used 7.0 beta 1 for
testing.

My post was oriented toward how specs distinguish, separate and define
how these position:absolu te and position:fixed should work. Whether web
authors do a fine job of designing a page with such knowledge or not is
a different matter. My post was about specs, not about how design meets
specific webpage requirements.

Yes. You accused that my last case was incorrect:

"Your page is interesting. Your last section is wrong though."


I said that this was your last section:

"Using absolute positioning and negative margin"

Is that true? Is this how you described your last section? Yes? No? I
hope I won't need to upload a screen shot ...

But couldn't point how. You thought that ICB had something to do with it,
but it hasn't.

I certainly thought you posted an example of an absolutely positioned
element with a negative margin.
Your example was not good in practice, and you didn't point it out, so I
did that. I have posted similar example here about 1.5 years ago, and I
didn't understand the problem with it then.

As far as I'm concerned, many people are still assuming there is a bug
with Opera 7.x and no bug with Mozilla regarding pos. abs. when the
specs (1) and even bugzilla (2) clearly indicate it is not the case.

I'm not. I think Opera 7 has done this correctly all the time about ICB.
But the problem you see on my site where I say Opera is buggy and mozilla
is not is not about ICB, but absolutely positioned element in relatievly
positioned container, that is defined even clearer.


absolutely positioned element in relatievly positioned container: that's
an importantissimo detail here. Yes, said that way and written that way,
it is much clearer.

:)

DU
Jul 20 '05 #26
FL
> Hi Everyone,

I know howto center a block using
margin-left: auto ;
margin-right: auto ;

but I'm trying to center vertically a box, any idea to solve this?

Thanks to all of you, now I have a lot of stuff to learn and I'll try
all the given tips but I still consider that W3c should have done
something simpler :-)
Jul 20 '05 #27
In article DU wrote:
Lauri Raittila wrote:
In article DU wrote:
Yes. You accused that my last case was incorrect:

"Your page is interesting. Your last section is wrong though."

I said that this was your last section:

"Using absolute positioning and negative margin"

Is that true? Is this how you described your last section? Yes? No? I
hope I won't need to upload a screen shot ...


I still fail to see your point.
I certainly thought you posted an example of an absolutely positioned
element with a negative margin.


Hm. Whats the problem with absolutely positioned thing and negative
margin?


I'm not. I think Opera 7 has done this correctly all the time about ICB.
But the problem you see on my site where I say Opera is buggy and mozilla
is not is not about ICB, but absolutely positioned element in relatievly
positioned container, that is defined even clearer.


absolutely positioned element in relatievly positioned container: that's
an importantissimo detail here. Yes, said that way and written that way,
it is much clearer.


Well, it doesn't really make much sence to include all information in
heading. It is made clear in content that it is actually relatively
positioned with container. At least I think it is.

What actually is not as clear is if it should center thing if:

html {height:100%;}
body {height:10em;ma rgin-top:-5em;top:50%;pos ition:absolute}

I think it should be centered.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #28

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
23089
by: Tony Vasquez | last post by:
Can somoene give me an example of how to center a div, according to it's image size... I am using different images, and so I have to resize it in a functino according to the image's size. So I use a h and w vairable that give me the height and width of the current image, but I can't seem to come up with a simple freaking formula to center the image vertically and horozontally. Thanks guys. fnFullView = function () { var h var w
10
26891
by: john T | last post by:
Is there anyway to vertically center a html table using css in such a way it does not alter the html table. When I tryied it just screws up.
10
10368
by: Unknown User | last post by:
Yet another question about vertical centering: How can I center a page vertically? I have searched on Google and didn't find anything that works at least on IE, Opera and Mozilla: http://milov.nl/code/css/verticalcenter.html Or using a table: http://www.quirksmode.org/css/centering.html Is there a way to do it and that works in Opera, IE and Mozilla? Thanks,
11
3088
by: Serg | last post by:
I had some CSS problems, and they were solved by someone who pointed out to me that I should have <!DOCTYPE ..... at the top of my code, which I now do. And it fixed all the inheritance problems, but it caused my ability to center Tables vertically to disappear. If I remove that top line, all is good. Except for my previous inheritance problems. The thing is my code calls one funtion with the parameter $out_msg which is always in...
1
2301
by: Rabbit | last post by:
Dear All I'm new to use ASP.Net for developement, can someone tell me how can I create a web form with size say 300px x 300px, align vertically center on the page Because so far I can use Div to align it horizontally center on the page, but I still can't find out how to do the "Vertically-center alignment"! 'cause I really want such form/table can be located center in the web page.
4
3776
by: John | last post by:
Is it possible to center a memo field value vertically? I use a memo field for printing address labels and I would like the addresses to show up centered vertically. Thanks, john
2
2778
by: jerrygadd | last post by:
Can some body help me vertically center an image using CSS? The customer only uses IE, and so the code is not debugged for other browsers! The image in question is found on line 1075 : "div.layout_img img" The image size is unknown I have tried to use the "margin:0px auto;" method with no success. I include the code here
0
9927
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9776
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10717
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10814
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10401
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9552
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5781
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5977
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
3
3223
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.