Вопрос: Вы знаете, как использовать высоту строки в вертикальном центре многослойного текста?

CSS

Давайте сначала посмотрим на эффект бега:

line-height实现一行或多行文字垂直居中

Точка знаний

  1. высота линии: относится к расстоянию между базовыми линиями между двумя строками текста, и это не высота, которая на самом деле растягивает высоту div, а высота строки.
  2. **линейный блок **: Каждая строка называется строковым блоком, который состоит из множества встроенных блоков в этой строке, и его высота может быть непосредственно определена наибольшей высотой строки. Высота многих строковых блоков складывается вертикально, чтобы сформировать высоту родительского элемента, такого как теги div или p, которые мы видим. Независимо от высоты, занимаемой строковым блоком, пространство, занимаемое строковым блоком, представляет собой ту же горизонтальную вертикальную линию, что и текстовое содержимое. Его свойство вертикального центрирования можно использовать для достижения вертикального центрирования текста или изображений.
  3. **Интервал между строками – высота встроенного блока **:
    Межстрочный интервал — это разница между размером шрифта и высотой строки, которая делится на две половины выше и ниже области содержимого. Высота встроенного блока (замененный элемент) = ширина области содержимого Высота встроенного блока (незаменяемые элементы) = высота строкиЧтобы узнать больше о разнице между замененными элементами и незаменяемыми элементами, нажмите здесь

Центрировать строку текста по вертикали

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

<p class="single_line">这是一行文字这是一行文字这是一行文字</p>

.single_line{
  line-height:150px; border:1px dashed #cccccc; padding-left:5px;font-size:12px;
}

Многострочный текст с вертикальным центрированием

достигатьВысота не фиксированаТекст центрирован по вертикали с использованием отступов. дляфиксированная высотаdiv, текст в нем отображается в одну или несколько строк, а шрифт крупный или мелкий, что делать? Вы можете использовать высоту строки.

<p class="mulit_line">
    <span style="font-size:12px;">这里是高度为150px的标签内的多行文字，文字大小为12像素。
        <br>这里是第二行，用来测试多行的显示效果。
    </span>
    <i>&nbsp;</i>
</p>

Свойство inline-block делает слой строки снаружи. В соответствии с точкой знаний 2 и базовым выравниванием встроенных элементов по умолчанию дайтеspanа такжеiнастроены наvertical-align:middleВот и все. В практических приложенияхiДля ширины установлено значение 0, а в данном случае используется значение 1 пиксель для облегчения понимания.

.mulit_line{ 
    border:1px dashed #cccccc; 
    padding-left:5px;
}
.mulit_line span{ 
    display:inline-block; 
    vertical-align:middle;
}
.mulit_line i{
    width:1px; 
    display:inline-block;
    vertical-align:middle; 
    font-size:0;
    background:red;
    line-height:150px;
}

Чтобы увидеть полный код, нажмите здесь

Больше контента приветствуется для обмена друг с другом.

Категории