如何垂直对齐2种不同大小的文本？

Question

我知道要将文本垂直对齐到块的中间，将行高设置为块的相同高度。

但是，如果我在中间有一个单词的句子，那就是2em。如果整个句子的行高与包含块相同，则较大的文本垂直对齐，但较小的文本与较大的文本在同一基线上。

如何设置它以使两个文本大小都垂直对齐，因此较大的文本将位于低于较小文本的基线上？

Answer 1

一个选项是使用一个表，其中不同大小的文本在他们自己的单元格中，并在每个单元格上使用align：middle。

它不漂亮，并不适用于所有场合，但它很简单，适用于任何文字大小。

Answer 2

这有效

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>