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?

score 151 · Accepted Answer · edited Mar 17 '15 at 23:07

151

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>

edited Mar 17 '15 at 23:07

rjmunro

24,825
18
102
130

answered Oct 22 '10 at 14:54

MatTheCat

16,312
6
52
66

5

And I always thought `vertical-align: middle` was for `table-cell`'s only! – Robin van Baalen Oct 30 '14 at 21:20
1

This seems to fail if I want the second span to be right floated. Then its aligned on top: [jsfiddle](http://jsfiddle.net/Lszdx2hd/) Any ideas how to make it work with float? – philk Oct 31 '14 at 23:27
2

Is it necessary to set height and line-height styles of parent div? – lexeek Nov 24 '15 at 01:26

DwB · Answer 2 · 2014-02-07T15:36:04.683

6

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.

edited Feb 07 '14 at 15:36

answered Oct 22 '10 at 14:58

DwB

33,855
10
50
78

11

I have since learned that W3Schools is not a good reference site. See http://w3fools.com/ for more info. – DwB Jan 21 '13 at 17:06
2

+1 Have an upvote for coming to the conclusion that W3S is a piece of junk. – aefxx Feb 07 '14 at 08:18

Matoeil · Answer 3 · 2017-09-05T08:47:11.100

5

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

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

edited Sep 05 '17 at 08:47

answered Sep 05 '17 at 08:36

Matoeil

5,944
9
47
69

score 1 · Answer 4 · answered Oct 22 '10 at 14:53

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)

score 1 · Answer 5 · answered Apr 03 '19 at 14:17

1

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

answered Apr 03 '19 at 14:17

Creaforge

4,493
24
33

score 1 · Answer 6 · answered Aug 09 '19 at 06:21

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>

score 0 · Answer 7 · answered Oct 22 '10 at 14:59

0

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.

answered Oct 22 '10 at 14:59

David Mårtensson

7,235
4
28
47

10

I would rather accept defeat before using a table for layout again. – JD Isaacks Oct 22 '10 at 15:00

score 0 · Answer 8 · answered Feb 05 '18 at 19:24

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>

How to vertically align 2 different sizes of text?

8 Answers8

Linked

Related