Вертикальное выравнивание на основе X-Height ⇐ CSS

[Anonymous]

При попытке центра контента в контейнере CSS-Tricks имеет отличное руководство. Однако, пытаясь вертикально сосредоточить какой -то текст, который немного меньше его контейнера, я думаю, что другой способ вертикально центрирования текста может быть предпочтительным. Вместо того, чтобы использовать всю высоту шрифта, я бы скорее сосредоточил бы его на основе X-высоты шрифта (в основном высота нижнего строк x) < /p>



и посмотрите этот пример, где красный основан на всей высоте, а зеленый, основанный на x-height

< /p>

Единственный вариант, который я мог бы придумать, - добавить псевдо -элемент в текст с той же высотой, что и контейнер, и на Используйте вертикальную анкету: средний к нему. < /p>

.pseudo {
white-space: nowrap;
}

.pseudo:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100px;
width: 0;
}
< /code>

Это работает, но, к сожалению, только для одной строки. Мне было интересно, пытался ли кто -нибудь еще решить эту проблему, и, возможно, есть лучшие практики, чтобы следовать? Мне особенно интересно использовать как можно меньше «волшебных» чисел, и если есть хорошее решение для варианта мульти -строки. чтобы сосредоточить это на основе X-Height и моего решения.

Подробнее здесь: https://stackoverflow.com/questions/258 ... n-x-height