Я знаю, что для вертикального выравнивания текста по середине блока вы устанавливаете высоту строки на ту же высоту, что и блок.
Однако, если у меня есть предложение со словом посередине, то это так 2em
. Если у всего предложения высота строки такая же, как у содержащего его блока, тогда больший текст выравнивается по вертикали, но меньший текст находится на той же базовой линии, что и больший текст.
Как я могу настроить его так, чтобы оба размера текста были выровнены по вертикали, чтобы более крупный текст находился на базовой линии ниже, чем меньший текст?
css
text
vertical-alignment
baseline
Джей Ди Айзекс
источник
источник
vertical-align: middle
было дляtable-cell
«S только!Функциональность, которую вы видите, верна, потому что по умолчанию для «вертикального выравнивания» используется базовая линия. Похоже, что вы хотите
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 <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>
источник