I want to be able to vertically center text in a div tags with
CSS.  If I were to use tables, I would do it like like this:

<p><table border=2 style="background:yellow; height: 100px">
 <tr><td valign=middle>Hello world</td></tr>
</table>

I would like to know how to do the equivalent in CSS so I don't need
to use tables.  Here is a sample CSS div tag:

<div style="background:yellow; height: 100px;">
  Hello world
</div>

If there was something like "vertical-align: middle" that would work
great, however, there isn't.

Note: Adding additional lines of text must not increase the size of
the div tag (just like it wouldn't in the table until it exceeded
100px).  I realize a pseudo solution is to specify a top and bottom
padding on the div tag, that won't work for my purposes.  Also,
absolute position isn't an option either.

---

Clarification of Question by davious-ga on 06 Sep 2002 10:18 PDT

voyager, thanks for your comments!  I wanted to add that padding is
actually ok if it works.  However, the solution has to work the same
way as a table would (eg: increasing lines shouldn't increase the
objects defined height until the height of the lines exceed the height
of the object, etc).

Also, I understand there actually is a "vertical-align: middle"
property, but I believe it actually has a different purpose than the
old-style valign=center.

Hi davious,

there is actually a "vertical-align: middle" which is supposed to work
for boxes (like the div element), however, there are lots of parts of
the CSS specification that are not supported by current browsers. Too
bad.

Other people who seem to have had the same problem dealed with it in
different ways. This one e.g. (
http://www.siteexperts.com/forums/viewConverse.asp?d_id=9934&Sort=0 )
does not really use the vertical-align (although he seems to think he
does (subscript and superscript are the only values supported by IE
AFAIK) - he uses padding. This might work with relative sizes and one
line of text).

Sorry,

voyager-ga