Для расположения текста по вертикали в CSS можно использовать несколько подходов:
- Использовать свойство «line-height». Это свойство устанавливает высоту строки текста и может использоваться для расположения текста по вертикали. Например:
.container {
height: 200px;
line-height: 200px;
text-align: center;
}
В этом примере блок .container имеет высоту 200 пикселей и свойство line-height устанавливает высоту строки текста на 200 пикселей. Текст будет расположен по центру блока по вертикали.
- Использовать свойство «display» и значение «flex». Этот способ также позволяет располагать текст по центру блока по вертикали. Например:
.container {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
В этом примере свойство «display» устанавливает значение «flex», а свойства «align-items» и «justify-content» центрируют содержимое по вертикали и горизонтали.
- Использовать свойство «position» и значение «absolute». Этот способ можно применять для расположения текста внутри другого блока. Например:
.container {
position: relative;
height: 200px;
}
.text {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
В этом примере блок .container имеет позицию «relative», а блок .text — абсолютную. Свойство «top» устанавливает отступ блока .text от верхней границы .container. Свойство «transform» позволяет перевести текст на 50% отступа блока .container от верхней границы, чтобы он был расположен по центру по вертикали.
Все эти подходы могут быть использованы для расположения текста по вертикали в CSS, в зависимости от ваших потребностей и структуры вашего HTML-кода.
Один комментарий на «“Как расположить текст по вертикали CSS”»
Часто использую именно 2й способ расположенияя текста по вертикали. Очень удобно, например для горячих кнопок (техподдержка, помощь) вдоль границ экрана.