Stylesheets - vertical-align: center

Author

vertical-align: center

Eric Lindsay

2005-12-03, 3:18 am

If I want to have the middle of an image vertically aligned with the
middle of a heading (or several lines of heading), is there some
particular way people would recommend? vertical-align: center looked
made for that. The effect I want is

img heading
img heading
img heading
or
heading
img heading
img heading
heading
or
img
img heading
img heading
img

I want a liquid layout, and I won't know in advance the relative size of
the image or the heading (which will be different for every page). Plus
the heading is likely to be long in some cases, and flow into several
lines if the viewpoint is narrow.

You guys are about to tell me that vertical-align: center will not work
in a certain much used web browser that Macintosh users don't have,
aren't you?

--
http://www.ericlindsay.com

Lauri Raittila

2005-12-03, 3:18 am

in comp.infosystems.www.authoring.stylesheets, Eric Lindsay wrote:
> If I want to have the middle of an image vertically aligned with the
> middle of a heading (or several lines of heading), is there some
> particular way people would recommend? vertical-align: center looked
> made for that. The effect I want is

> I want a liquid layout, and I won't know in advance the relative size of
> the image or the heading (which will be different for every page). Plus
> the heading is likely to be long in some cases, and flow into several
> lines if the viewpoint is narrow.

> You guys are about to tell me that vertical-align: center will not work
> in a certain much used web browser that Macintosh users don't have,
> aren't you?

Yes, and should not work on any much used Mac browser either. Use
vertical-align:middle

Vertical-align:middle is not exactly made for this, as you want to do
multiline vertical align, as it is only for vertical align inside linebox
usually.

Some ways to do vertical centering:
http://www.student.oulu.fi/~laurirai/www/css/middle/

Choose some that fit your purpose...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

Eric Lindsay

2005-12-03, 6:32 pm

In article <MPG.1dfb693ce7fbfc4598a6ca@news.individual.net>,
Lauri Raittila <lauri@raittila.cjb.net> wrote:

> in comp.infosystems.www.authoring.stylesheets, Eric Lindsay wrote:
[color=darkred]
> Yes, and should not work on any much used Mac browser either. Use
> vertical-align:middle

Opps, thanks for that. I guess I was looking at text-align as well and
didn't recall the correct item for vertical-align.

> Vertical-align:middle is not exactly made for this, as you want to do
> multiline vertical align, as it is only for vertical align inside linebox
> usually.

So if I can actually keep the heading confined to one line, I am in a
much better position. I normally do manage to confine headings to a
single line, but I rather suspect the people wanting things changed will
want lots of lines of text.

> Some ways to do vertical centering:
> http://www.student.oulu.fi/~laurirai/www/css/middle/
>
> Choose some that fit your purpose...

After posting I had actually found that wonderful resource that you have
provided. It has provided some great ways of doing other center layouts.
Thank you very much for it.

However I couldn't figure how to precisely match the many ideas on your
page to what I wanted to do once I had eliminated using pixel
measurements and tables. I can do it with a table, but I really don't
want to get pushed into using a table for layout until I have nowhere
else to turn. If I could be sure of having a single line of header it
would be great. The line-height idea looks very handy if text doesn't
wrap. Plus some of the really nice ideas don't work with IE. Very
handy page. I will have a good play with your ideas and see what
happens. Thanks.

Of course, maybe I can talk them out of the idea that they want several
lines of heading. Maybe I can convince them that having the top of the
image and the top of the heading aligned would look more like the rest
of the page.

--
http://www.ericlindsay.com