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

91

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

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

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

Джей Ди Айзекс
источник

Ответы:

149

Примерять 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>

MatTheCat
источник
5
И я всегда думал , что vertical-align: middleбыло для table-cell«S только!
Робин ван Баален,
1
Кажется, это не сработает, если я хочу, чтобы второй диапазон был плавным. Затем он выровнен сверху: jsfiddle Есть идеи, как заставить его работать с float?
Филк
2
Нужно ли устанавливать стили высоты и высоты строки родительского div?
lexeek
6

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

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

DwB
источник
11
С тех пор я узнал, что W3Schools - не лучший справочный сайт. См. W3fools.com для получения дополнительной информации.
DwB
2
+1 Проголосуйте за то, что пришли к выводу, что W3S - это мусор.
aefxx 07
4

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

 span{
     vertical-align: bottom;
     line-height: 50px;
}
Matoeil
источник
1

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

Alex
источник
1

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

Creaforge
источник
1

Простой способ - использовать 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>
Томаш Мацек
источник
0

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

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

Дэвид Мортенссон
источник
9
Я бы предпочел принять поражение, прежде чем снова использовать стол для разметки.
Джей Ди Айзекс,
0

Это работает

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>

Ронни Ройстон
источник