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

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

78 голосов
/ 22 октября 2010

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

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

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

Ответы [ 7 ]

138 голосов
/ 22 октября 2010

Попробуйте 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>
5 голосов
/ 22 октября 2010

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

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

4 голосов
/ 05 сентября 2017

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

 span{
     vertical-align: bottom;
     line-height: 50px;
}
1 голос
/ 03 апреля 2019

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

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

0 голосов
/ 05 февраля 2018

Это работает 

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>
0 голосов
/ 22 октября 2010

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

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

...