PHWinfo - Afficher un message - Is it possible to vertical align in a div?

28/03/2008, 00h25

On 2008-03-27, Dave Rado <dave.rado@dsl.pipex.com> wrote:
[...]
> Apart from the lack of vertical centring, mock-ups 2 and 3 do look
> almost identical to each other in *non*-Microsoft browsers, but they
> don't in IE. In IE 6 and 7, in "mock-up 3", an unwanted 3px gap has
> appeared between the article title/page no. div and the orange line
> below it, for some reason that I can't fathom; and in IE 5.5, in
> addition to this problem, the right-hand edge of the page no. graphic
> is hidden, again for some reason that I can't fathom. Do you
> understand why, and how to fix this?

I don't know anything about IE.

> I didn't get the latter (IE 5.5)
> problem with the three icons that you ed me position earlier in
> the thread.
>
> In order to try to fix the IE 5.5 problem of the right-hand edge of
> the page no. graphic being hidden, I then tried using:
> img.PgNo {position: absolute; right: 0}
> (instead of using {float: right}), which was the method that you had
> suggested and which worked well for the rightmost of the three icons
> (img.TopOfPageIconsRight) above the document page earlier in this
> thread; but instead of aligning the image to the right of its parent
> div, (div.Header), it aligned it to the right of that div's parent div
> (div.DocumentPage) - in all browsers - and I don't understand why -
> see my "mock-up 4" at http://tinyurl.com/3dfm37 . Again, do you
> understand why, and how to fix this?

Position: absolute; right: 0 puts the box 0px from the right edge of its
container, which is the nearest ancestor with position: relative, fixed
or absolute.

In your case that's DocumentPage. If you make div.Header position:
relative then it will become the container for the PgNo which is what
you want.

>
> ****
>
>> Ben wrote:
>> You won't get anything vertically centered though. The only way to do vertical centering of a shrink-to-fit block is with tables.
>
> I've found several web tutorials that claim it is possible to do this
> (e.g. see http://tinyurl.com/2jhlbp)

That is using tables (display: table-cell is tables, but in a good way,
but it won't work in IE).

Position: absolute and top: 50% does sort of work. This is a useful page
about vertical centering:

http://www.student.oulu.fi/~laurirai/www/css/middle/

[...]
> I'm starting to think that you're right and that those web tutorials
> that imply thyat one can have cross-browser table-like vertical
> centring using css are misleading, in that while it is possible to get
> a sort of vertical centring in IE with css, it only seems to work
> properly if one can guarantee that the height of the contents of the
> div will never exceed the height of the div

That's basically the problem with position: absolute and top: 50%.

> - which I can't guarantee. So I think this is probably a case where
> I'll have to stick with using a table.

That is the best course of action, unless you can compromise on wanting
vertical centering.

[...]
> The reason I need vertically centred text for this, by the way, is
> that when the header only contains one line of text, which it
> frequently does, it looks much more pleasing on the eye if it is
> vertically centred relative to the page number graphic, as in "mock-up
> 2" (http://tinyurl.com/3yqf5t) than it does if it is not, as in "mock-
> up 3" (http://tinyurl.com/32xotl) - even in Firefox (and the
> difference is much more stark in IE).

To my eye the one that isn't vertically centered looks just fine

> I have some other layout tables that I had been hoping to convert to
> divs but in which the text also need to be vertically centred,
> although unlike the above table, I think I *can* guarantee that the
> height of the content of the other tables or divs will never be
> greater than the height of the divs themselves, so I guess I *could*
> use the vertical centring workaround method described at
> http://tinyurl.com/2jhlbp to replace those tables with divs, but I'm
> wondering whether it's really justified, given that this workaround
> seems quite clunky to me (in order for it to work in IE). See my
> mock-up of a menu at http://tinyurl.com/36pscl , and of a footer at
> http://tinyurl.com/33fej9 , which currently both use simple css-based
> tables. (Or you can see both of them in full context at
> http://tinyurl.com/28mcte, but the othetr mock-ups are much simpler
> and easier to make sense of).
>
> In your opinion, would it be advisable to convert these tables to divs
> using the above workaround?

In my opinion stick with the tables if you must have vertical centering.

> The reason I'm not sure is that most of the normal reasons for using
> divs rather than tables don't seem to me to apply in either case,
> mainly because the workaround to get the vertical centring in IE seems
> quite clunky to me

I agree.

[...]
> - and - correct me if
> I'm wrong, but I doubt it would make the html any easier for a screen
> reader to navigate, because it requires several additional divs to
> make it work.

I don't know much about screen readers but someone here I think once
pointed out that his screen reader just reads what's actually
_displayed_ in the browser window-- in other words it grabs text off the
page like a clipboard copy operation, and doesn't look at the HTML
source at all.

28/03/2008, 00h25	#19
Ben C Messages: n/a Hébergeur:	Re: Is it possible to vertical align in a div? On 2008-03-27, Dave Rado <dave.rado@dsl.pipex.com> wrote: [...] > Apart from the lack of vertical centring, mock-ups 2 and 3 do look > almost identical to each other in non-Microsoft browsers, but they > don't in IE. In IE 6 and 7, in "mock-up 3", an unwanted 3px gap has > appeared between the article title/page no. div and the orange line > below it, for some reason that I can't fathom; and in IE 5.5, in > addition to this problem, the right-hand edge of the page no. graphic > is hidden, again for some reason that I can't fathom. Do you > understand why, and how to fix this? I don't know anything about IE. > I didn't get the latter (IE 5.5) > problem with the three icons that you ed me position earlier in > the thread. > > In order to try to fix the IE 5.5 problem of the right-hand edge of > the page no. graphic being hidden, I then tried using: > img.PgNo {position: absolute; right: 0} > (instead of using {float: right}), which was the method that you had > suggested and which worked well for the rightmost of the three icons > (img.TopOfPageIconsRight) above the document page earlier in this > thread; but instead of aligning the image to the right of its parent > div, (div.Header), it aligned it to the right of that div's parent div > (div.DocumentPage) - in all browsers - and I don't understand why - > see my "mock-up 4" at http://tinyurl.com/3dfm37 . Again, do you > understand why, and how to fix this? Position: absolute; right: 0 puts the box 0px from the right edge of its container, which is the nearest ancestor with position: relative, fixed or absolute. In your case that's DocumentPage. If you make div.Header position: relative then it will become the container for the PgNo which is what you want. > > **** > >> Ben wrote: >> You won't get anything vertically centered though. The only way to do vertical centering of a shrink-to-fit block is with tables. > > I've found several web tutorials that claim it is possible to do this > (e.g. see http://tinyurl.com/2jhlbp) That is using tables (display: table-cell is tables, but in a good way, but it won't work in IE). Position: absolute and top: 50% does sort of work. This is a useful page about vertical centering: http://www.student.oulu.fi/~laurirai/www/css/middle/ [...] > I'm starting to think that you're right and that those web tutorials > that imply thyat one can have cross-browser table-like vertical > centring using css are misleading, in that while it is possible to get > a sort of vertical centring in IE with css, it only seems to work > properly if one can guarantee that the height of the contents of the > div will never exceed the height of the div That's basically the problem with position: absolute and top: 50%. > - which I can't guarantee. So I think this is probably a case where > I'll have to stick with using a table. That is the best course of action, unless you can compromise on wanting vertical centering. [...] > The reason I need vertically centred text for this, by the way, is > that when the header only contains one line of text, which it > frequently does, it looks much more pleasing on the eye if it is > vertically centred relative to the page number graphic, as in "mock-up > 2" (http://tinyurl.com/3yqf5t) than it does if it is not, as in "mock- > up 3" (http://tinyurl.com/32xotl) - even in Firefox (and the > difference is much more stark in IE). To my eye the one that isn't vertically centered looks just fine > I have some other layout tables that I had been hoping to convert to > divs but in which the text also need to be vertically centred, > although unlike the above table, I think I can guarantee that the > height of the content of the other tables or divs will never be > greater than the height of the divs themselves, so I guess I could > use the vertical centring workaround method described at > http://tinyurl.com/2jhlbp to replace those tables with divs, but I'm > wondering whether it's really justified, given that this workaround > seems quite clunky to me (in order for it to work in IE). See my > mock-up of a menu at http://tinyurl.com/36pscl , and of a footer at > http://tinyurl.com/33fej9 , which currently both use simple css-based > tables. (Or you can see both of them in full context at > http://tinyurl.com/28mcte, but the othetr mock-ups are much simpler > and easier to make sense of). > > In your opinion, would it be advisable to convert these tables to divs > using the above workaround? In my opinion stick with the tables if you must have vertical centering. > The reason I'm not sure is that most of the normal reasons for using > divs rather than tables don't seem to me to apply in either case, > mainly because the workaround to get the vertical centring in IE seems > quite clunky to me I agree. [...] > - and - correct me if > I'm wrong, but I doubt it would make the html any easier for a screen > reader to navigate, because it requires several additional divs to > make it work. I don't know much about screen readers but someone here I think once pointed out that his screen reader just reads what's actually _displayed_ in the browser window-- in other words it grabs text off the page like a clipboard copy operation, and doesn't look at the HTML source at all.