vertical-align
is hard. Have you ever wanted to vertically center an icon with text? This usually means "vertically align with capital letters", as visually, a text line goes from baseline up to the capital top. (That's because descenders are far less frequent than ascenders.)
In this card we'll vertically center an icon (or any "blockish" inline element, really) with the capital letters of surrounding text. This works well with our modern approach to SVG icons.
display: inline
have their baseline aligned (to the baseline of their container)display: inline-block
, inline-grid
etc. have their bottom edge aligned (to the baseline of their container)vertical-align: middle
aligns an element to the middle of a lowercase x
. We cannot use it, since we want to align to uppercase letters.We'll move the bottom edge of the icon up to the middle of a capital letter, then push it down by half its own height. This will center the icon vertically to uppercase letters – no matter the icon height or the surrounding font size!
:root {
--font-capital-height: 0.675 // capital height / em-square
}
em
, so the icon must not have a font size set.
.icon {
height: var(--icon-height)
--icon-v-middle: calc(var(--icon-height)/2)
--capital-v-middle: calc(var(--font-capital-height)/2 * 1em)
vertical-align: calc(var(--capital-v-middle) - var(--icon-v-middle))
/* Do not set a font-size here! */
}