У меня есть отзывчивый элемент, где ширина и высота будут одинаковыми. Внутри этого у меня есть текст, который я хочу центрировать по вертикали.
Как установить текст line-height таким же, как он, если я не знаю родительскую высоту?
line-height: 100% относится к регулярной высоте шрифта, поэтому это не помогает...
Здесь другой способ центрировать элемент по вертикали. Я встретил эту технику некоторое время назад. В основном он использует псевдоэлемент и выравнивание по вертикали: средний.
.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;
}
Я бы поставил текст внутри другого элемента, из которого вы знаете (или задаете) размер. Затем установите для него относительное позиционирование, верхнее, левое 50% и отрицательное левое и правое поля.
Единственная проблема заключается в том, что это зависит от известного/фиксированного текстового блока. Если текст является переменным, я боюсь, вам придётся прибегнуть к использованию Javascript..