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?

Melanochroi

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>

Roach

And I always thought vertical-align: middle was for table-cell's only! – Carolanncarole

This seems to fail if I want the second span to be right floated. Then its aligned on top: jsfiddle Any ideas how to make it work with float? – Strudel

Is it necessary to set height and line-height styles of parent div? – Allowed

What about pure geometrically vertical center? The distance of the empty space above the small "test" to the top line of the big "test" is 4px. The empty space below the small "test" to the bottom line of the big "test" is 6px. So in geometrical sense the small "test" is not vertically centered to to the big "test". How could one achieve that? – Birth

@AlexanderMihailov for now unless you know for sure your font’s metrics this is not possible. In the future I believe you’ll be able to use leading-trim. – Roach

Answer 2

the two set of text must have the same fixed line-height and the vertical-align set

 span{
     vertical-align: bottom;
     line-height: 50px;
}

Cultivation

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. 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.

Thought

I have since learned that W3Schools is not a good reference site. See w3fools.com for more info. – Thought

+1 Have an upvote for coming to the conclusion that W3S is a piece of junk. – Cesium

Answer 4

Easy way - use flex:

<div>
        abcde
        &nbsp;&nbsp;
        <span>efghai</span>
</div>

<style>
    div {
        padding: 20px;
        background-color: orange;
        display: flex;
        align-items: center; }

    span {
        font-size: 1.5em; }
</style>

Wiegand

Answer 5

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)

Maricela

Answer 6

You can use percentage sizes to reapply the parent's line-height

.big {
  font-size: 200%;
  line-height: 25%;
  display: inline-block;
  vertical-align: middle;
}

Utque aegrum corpus <span class="big">etiam</span> levibus solet offensis 

Auramine

Answer 7

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.

Armorial

I would rather accept defeat before using a table for layout again. – Melanochroi

Answer 8

This works

header > span {
    margin: 0px 12px 0px 12px;
    vertical-align:middle;
}
.responsive-title{
    font-size: 12vmin;
    line-height: 1em;
}
.responsive-subtitle{
    font-size: 6vmin;
    line-height: 2em;
}

<header>
  <span class="responsive-title">Foo</span>
  <span class="responsive-subtitle">Bar</span>
</header>

Valentia