May 23, 2004

2:01 AM

A CSS question: How do you align text vertically within a div?
posted by Gyan to (9 comments total)

Do you mean you want to write in Chinese or Japanese or something and have the letters go under each other, like in Photoshop or Fireworks? Not in plain html or CSS, AFAIK. You need to do somehthing very tricky, I suspect, unless you just make the text into an image.
posted by planetkyoto at 2:20 AM on May 23, 2004

display: table-cell; vertical-align: middle;
posted by nicwolff at 2:58 AM on May 23, 2004

but nicwolff,
that
text
is
not
aligned
vertically.
o
h
,
w
e
l
l
.
.
.
posted by quonsar at 4:01 AM on May 23, 2004

You don't.

CSS3, which we may see supported sometime around 2027, offers the glyph-orientation-vertical which may be close to what you want, the catch is it doesn't work in any current browsers. There is also an IE specific filter. For now you will have to make an image or resort to the quonsar method and introduce line breaks.
posted by cedar at 5:33 AM on May 23, 2004

I assumed that Gyan simply wanted to center content vertically within a div - rereading the question, I think that's the case.

Anyhow, I was all set to write in with an explanation of how CSS 2 doesn't really allow for this, but nicwolff beat me to the punch . . . with a workaround! I didn't know about that table-cell trick. Thanks!

How does it hold up across browsers and platforms?
posted by aladfar at 11:11 AM on May 23, 2004

I can't get the display table-cell thing to work at all in IE. I tend to use this code:

<div style="height: 20%;">
<table style="height: 100%;"><td>
text here
</td></table>
</div>

Note that the div's height has to be set, because the table's height of 100% is relative to the height of the div.

Oh, and pre-emptively: just because you're using CSS doesn't mean you can't use a table occasionally -- I've never understood the modern all-out War on Tables myself. They're useful for some things. I mean, with just one table, you can vertically centre an entire page, if you want:

<table style="height: 100%;"><td>
other page text and code here
</td></table>

They're also useful for making username/password boxes line up properly, amongst other things.
posted by reklaw at 12:30 PM on May 23, 2004

How does it hold up across browsers and platforms?

Like most CSS, pretty well except in IE which was written by trained otters. (They're mediocre programmers, but, give them a break, they're otters.) The other vertical-centering trick is

top: 50%; height: 100px; margin-top: -50px;

but it requires that you specify the height of the div in pixels. There's been a lot of work done on refining that solution, and on others.

And like reklaw says, don't kill yourself trying to avoid tables; there are still things you can't do with CSS alone.
posted by nicwolff at 2:04 PM on May 23, 2004

Thanks for all your help. I can't get it to work, though.

I've prepared an image to showcase how I want it to look.

Layout (JPEG, 40KB).

I want to position the 'Lens' and the links in the top-right banner, the same as in the image.
posted by Gyan at 4:36 PM on May 23, 2004

Oops, you might have to cut-n-paste the link directly in your address bar.
posted by Gyan at 4:37 PM on May 23, 2004