Установите высоту строки в процентах относительно родительского элемента

У меня есть отзывчивый элемент, где ширина и высота будут одинаковыми. Внутри этого у меня есть текст, который я хочу центрировать по вертикали.

Как установить текст line-height таким же, как он, если я не знаю родительскую высоту?

line-height: 100% относится к регулярной высоте шрифта, поэтому это не помогает...

ОТВЕТЫ

Ответ 1

Здесь другой способ центрировать элемент по вертикали. Я встретил эту технику некоторое время назад. В основном он использует псевдоэлемент и выравнивание по вертикали: средний.

.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Ответ 2

Я бы поставил текст внутри другого элемента, из которого вы знаете (или задаете) размер. Затем установите для него относительное позиционирование, верхнее, левое 50% и отрицательное левое и правое поля.

Смотрите эту скрипту

Единственная проблема заключается в том, что это зависит от известного/фиксированного текстового блока. Если текст является переменным, я боюсь, вам придётся прибегнуть к использованию Javascript..