Как выровнять по вертикали 2 разных размера текста?

Я знаю, что для вертикального выравнивания текста по середине блока вы устанавливаете высоту строки на ту же высоту, что и блок.

Однако, если у меня есть предложение со словом посередине, то это так 2em. Если у всего предложения высота строки такая же, как у содержащего его блока, тогда больший текст выравнивается по вертикали, но меньший текст находится на той же базовой линии, что и больший текст.

Как я могу настроить его так, чтобы оба размера текста были выровнены по вертикали, чтобы более крупный текст находился на базовой линии ниже, чем меньший текст?

Примерять vertical-align:middle;встроенные контейнеры?

РЕДАКТИРОВАТЬ: он работает, но весь ваш текст должен быть во встроенном контейнере, например:

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

Функциональность, которую вы видите, верна, потому что по умолчанию для «вертикального выравнивания» используется базовая линия. Похоже, что вы хотите vertical-align:top. Есть и другие варианты. Смотрите здесь, на W3Schools .

Править W3Schools не привели в порядок свою деятельность и по-прежнему, кажется, некачественный (в лучшем случае) источник информации. Сейчас я использую sitepoint . Прокрутите вниз главную страницу sitepoint, чтобы получить доступ к их справочным разделам.

два набора текста должны иметь одинаковую фиксированную высоту строки и набор вертикального выравнивания

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

Однако вы технически не можете, если у вас есть фиксированные размеры текста, вы можете использовать позиционирование (относительное), чтобы переместить больший текст вниз и установить высоту строки для меньшего текста (я предполагаю, что этот больший текст помечен как таковой так что вы можете использовать это как селектор CSS)

Вы можете использовать процентные размеры, чтобы повторно применить родительский 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 

Простой способ - использовать 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>

Можно использовать таблицу, где тексты разного размера находятся в своих ячейках, и использовать align: middle для каждой ячейки.

Это некрасиво и работает не на все случаи жизни, но оно простое и работает с любым размером текста.

Это работает

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>