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

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

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

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


text vertical-alignment css baseline
person JD Isaacks    schedule 22.10.2010    source источник

Ответы (8)


arrow_upward
156
arrow_downward

Попробовать 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>

person MatTheCat    schedule 22.10.2010
comment
И я всегда думал, что vertical-align: middle предназначен только для table-cell! - person Robin van Baalen; 31.10.2014
comment
Кажется, это не сработает, если я хочу, чтобы второй диапазон был плавно перемещен вправо. Затем он выровнен сверху: jsfiddle Есть идеи, как заставить его работать с float? - person philk; 01.11.2014
comment
Нужно ли устанавливать стили высоты и высоты строки родительского div? - person lexeek; 24.11.2015

arrow_upward
6
arrow_downward

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

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

person DwB    schedule 22.10.2010
comment
С тех пор я узнал, что W3Schools не является хорошим справочным сайтом. Дополнительную информацию см. На w3fools.com. - person DwB; 21.01.2013
comment
+1 Проголосуйте за то, что пришел к выводу, что W3S - это мусор. - person aefxx; 07.02.2014

arrow_upward
5
arrow_downward

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

 span{
     vertical-align: bottom;
     line-height: 50px;
}
person Matoeil    schedule 05.09.2017

arrow_upward
2
arrow_downward

Простой способ - используйте 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>
person Tomas Macek    schedule 09.08.2019

arrow_upward
1
arrow_downward

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

person Alex    schedule 22.10.2010

arrow_upward
1
arrow_downward

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

person Creaforge    schedule 03.04.2019

arrow_upward
0
arrow_downward

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

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

person David Mårtensson    schedule 22.10.2010
comment
Я бы предпочел смириться с поражением, прежде чем снова использовать стол для разметки. - person JD Isaacks; 22.10.2010

arrow_upward
0
arrow_downward

Это работает

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>

person Ronnie Royston    schedule 05.02.2018