Not understanding vertical-align

[Joshua Beall]

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?

 

[brucie]

in post: <

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

 

[Steve Pugh]

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.html#propdef-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

 

[Mitja]

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.

 

[Joshua Beall]

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?

 

[Steve Pugh]

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

 

[Mark Parnell]

but it's not supported widely enough anyway.

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

 

[Mitja]

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...