How to vertically align 2 different sizes of text?

Question

I know to vertically align text to the middle of a block, you set the line-height to the same height of the block.

However, if I have a sentence with a word in the middle, that is 2em. If the entire sentence has a line-height the same as the containing block, then the larger text is vertically aligned but the smaller text is on the same baseline as the larger text.

How can I set it so both sizes of text are vertically aligned, so the larger text will be on a baseline lower than the smaller text?

Answer 1

Try vertical-align:middle; on inline containers?

EDIT : it works but all your text must be in an inline container, like this :

    <div style="height:100px; line-height:100px; background:#EEE;">          <span style="vertical-align:middle;">test</span>          <span style="font-size:2em; vertical-align:middle;">test</span>      </div>

Answer 2

The functionality you are seeing is correct because the default for "vertical-align" is baseline. It appears that you want vertical-align:top. There are other options. See here at W3Schools.

Edit W3Schools has not cleaned up their act and still, appear, to be a shoddy (at best) source of information. I now use sitepoint. Scroll to the bottom of the sitepoint front page to access their reference sections.