lucy24 - 5:17 am on Aug 20, 2012 (gmt 0)
Uhm. Ahem. I have to come slinking back here because I have just figured out that the code I posted early in this thread doesn't do what I thought it did. Mea culpa. It only works because
#1 I have all three kinds of vertical alignment (top, middle, bottom) in the same block
#2 the sample bit of text only take up one line
"vertical-align: top" (or "bottom" or "middle") don't refer to the overall alignment of the text block. They mean, in practice:
"top" = align the top of your text snippet with the overall baseline
"bottom" = align the bottom of your text et cetera (this is basically the default)
"middle" = align the vertical middle of your text with the overall baseline
Think lined writing paper. You can write along the top of the line, or you can hang the tops of your letters under the line like laundry (or, seriously, like devanagari-based scripts), or you can splat your writing right over the line.
This explains why the words "top" and "bottom" seemed to do the opposite of what I thought they did.
In order for the posted code to work, you have to use very short bits of text and there have to be at least two different alignments within the block. You can cheat by marking one of them as "visibility: hidden". But, well, there is a time and a place for cheating. And there is a time and a place for being entirely on the wrong track.
Dang it all.
Conversely, "display: table-cell" flatly refuses to do what I want when it comes to left or right alignment :( I can probably make it behave by nesting at least three divs, each with a slightly different set of styles.