Вертикально центрируйте заголовок с фиксированной высотой в CSS

У меня есть заголовок

<h1>My Header</h1>

Он имеет высоту 150px и font-size, скажем, 1.3em;. Как сделать текст заголовка вертикально центрированным с помощью CSS. Я бы предпочел не оборачивать его в контейнер DIV (упаковка div действительно разрушает всю идею CSS).

css vertical-alignment

18.11.2008 16:56

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

1 519

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Если высота заголовка 150 пикселей, не могли бы вы также установить line-height на 150 пикселей?

h1
{
    font-size: 1.3em;
    line-height: 150px;
    height: 150px;
}

Спасибо за ответ. Как отметила alexmeia, кажется, что высота не обязательна, поскольку line-height уже растягивает тег.

— 18.11.2008 19:03

18.11.2008 17:10

Ответ принят как подходящий

Лучше всего добавить это правило:

h1 {
    line-height: 150px;
}

Вам не нужно устанавливать значение высоты, а размер шрифта не влияет на вертикальное выравнивание.

Размер шрифта действительно влияет на размер шрифта;)

— 18.11.2008 19:02

Разве это не проблема, если текст в конечном итоге состоит из нескольких строк?

— 19.08.2009 01:36

18.11.2008 17:26

Другие вопросы по теме

Как вертикально выровнять элементы в div?

Как вертикально центрировать контент с переменной высотой в div?

Как центрировать горизонтальную линию по вертикали до первой строки многострочного абзаца с помощью CSS?

Вертикально выровнять середину изображения по полной высоте шрифта по оси X

Выравнивание TopTrailing не работает при попытке разместить vStack внутри zStack

Как я могу выровнять по вертикали/поверху изображения tikz (схемы) в мини-странице/рисунке/табличной среде?

Вертикальное выравнивание CSS: text-top; не работает для элементов span в моем теге <p>?

Плавающий вправо, влево и вверх по сетке

Как выровнять текст по вертикали с помощью bootstrap 4

Я хочу выровнять изображения из разных div в моей аккордеонной карте Bootstrap 4 друг над другом

Вертикально центрируйте заголовок с фиксированной высотой в CSS

Ответы 2

Другие вопросы по теме

Похожие вопросы