Not understanding vertical-align

Hi All,

I am obviously not understanding vertical-align somehow. Either I am using
it improperly, or I am expecting it to do something it does not do:

I *thought* it was similar to the valign attributes for <td> tags in HTML.
However, it does not appear to do that:
http://jbeall.com/pages/dev/test7.php

What I want to do is set the vertical alignment for the text in the <div>
tags. How should I go about this?

Joshua Beall

in post: <news:9eUcc.8376$>
"Joshua Beall" <> said:

> I am obviously not understanding vertical-align somehow.
> I *thought* it was similar to the valign attributes for <td> tags in HTML.

if used in conjunction with display:table-cell;

> However, it does not appear to do that:
> http://jbeall.com/pages/dev/test7.php

div{line-height:100px;vertical-align:middle;}

or

div{display:table-cell;height:100px;vertical-align:middle;}

but its not supported by IE and it changes the <div> behavior

--
b r u c i e

"Joshua Beall" <> wrote:

>I am obviously not understanding vertical-align somehow. Either I am using
>it improperly, or I am expecting it to do something it does not do:

It's a common source of confusion. Partly because it does two
different things depending on which element it is applied to.

However, the spec is reasonably clear:
http://www.w3.org/TR/CSS21/visudet.h...vertical-align

>I *thought* it was similar to the valign attributes for <td> tags in HTML.

One of its uses is exactly like the valign attribute for td elements.

>However, it does not appear to do that:
>http://jbeall.com/pages/dev/test7.php
>
>What I want to do is set the vertical alignment for the text in the <div>
>tags.

From the CSS spec:
"Applies to: inline-level and 'table-cell' elements"

DIV is not an inline-level or table-cell element.

>How should I go about this?

Set padding-top and padding-bottom.
Or if you know that you'll only ever have one line of text set
line-height to the same value as the div's height.
Or set display: table-cell; and wait for MSIE to support it.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <> <http://steve.pugh.net/>

"Joshua Beall" <> wrote in message
news:9eUcc.8376$...
> Hi All,
>
> I am obviously not understanding vertical-align somehow. Either I am
using
> it improperly, or I am expecting it to do something it does not do:
>
> I *thought* it was similar to the valign attributes for <td> tags in HTML.

It is.

> However, it does not appear to do that:
> http://jbeall.com/pages/dev/test7.php
>
> What I want to do is set the vertical alignment for the text in the <div>
> tags. How should I go about this?

As per spec, only table cells support vertical aligning. You could
theoretically do something like <div style="disply:table-cell"> (note sure
about the table-cell thing) but it's not supported widely enough anyway.

"Steve Pugh" <> wrote in message
news:...
> From the CSS spec:
> "Applies to: inline-level and 'table-cell' elements"
>
> DIV is not an inline-level or table-cell element.

Hmm, interesting. What exactly does "inline-level" mean, and where can I
see a list of the tags that fit into this category?

"Joshua Beall" <> wrote:

>"Steve Pugh" <> wrote in message
>news:.. .
>> From the CSS spec:
>> "Applies to: inline-level and 'table-cell' elements"
>>
>> DIV is not an inline-level or table-cell element.
>
>Hmm, interesting. What exactly does "inline-level" mean,

http://www.w3.org/TR/CSS21/visuren.html#q7

In general it means elements that have display: inline; or display:
inline-table;.

>and where can I
>see a list of the tags that fit into this category?

Well that depends.
Any element can be made inline by applying display: inline; and user
agent default stylesheets may have different default values. But the
elements that are declared as %inline; in the HTML 4 DTD are all
normally inline with respect to CSS:
http://www.w3.org/TR/html4/sgml/dtd.html#inline

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <> <http://steve.pugh.net/>

On Wed, 7 Apr 2004 16:52:37 +0200, "Mitja" <> declared in
alt.html:

> but it's not supported widely enough anyway.

Meaning: it's supported by pretty much every browser except IE. *Sigh*

--
Mark Parnell
http://www.clarkecomputers.com.au

> > but it's not supported widely enough anyway.
>
> Meaning: it's supported by pretty much every browser except IE. *Sigh*

True, but that's browsers for you...