When trying to center content in a container CSS-Tricks has a great guide. However when trying to vertically center some text that's just slightly smaller than its container, I think a different way of vertically centering text might be preferable. Instead of using the entire height of the font, I would rather center it based on the x-height of the font (basically the height of a lowercase x)
And see this example where red is based on the entire height and green is based on the x-height
The only option I could come up with is to add a pseudo element to the text with the same height as the container and to use vertical-align: middle to it.
.pseudo {
white-space: nowrap;
}
.pseudo:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100px;
width: 0;
}
This works, but unfortunately only for a single line. I was wondering if anyone else tried to solve this issue and if perhaps there are best practices to follow? I am especially interested using as little "magic" numbers as possible and if there is a good solution for the multi line variant.
See Codepen for an example on why I want to center it based on the x-height, and my solution.
line-height
. E.g. see jsfiddle.net/9gdttoyb