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

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

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

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

Ответ 1

Попробуйте vertical-align:middle; на встроенных контейнерах?

EDIT: он работает, но весь ваш текст должен быть в встроенном контейнере, например:

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

Это работает

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>