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

You technically can't, however, if you have fixed text sizes you could use positioning (relative) to move the larger text down and set the line-height to the smaller text (I'm presuming this larger text is marked up as such so you can use that as a CSS selector)

Answer 2

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 3

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. Here is a link: http://www.w3schools.com/css/pr_pos_vertical-align.asp

Answer 4

An option is to use a table there the different sized texts are in their own cells and use align:middle on each cell.

Its not pretty and does not work for all occasions, but it is simple and works with any text size.