Как вертикально выровнять строку по буквам в нижнем регистре?

Пытаюсь понять как мне сделать блок высотой с маленькую букву (1ex) и со строкой внутри которая бы была идеально выровнена внутри него по буквам в нижнем регистре?
Пример неработающего выравнивания: https://jsfiddle.net/LordGuard/x2mfd01g/4/

Выходит так:
5dd679aa99dd9385137234.png

А надо вот так:
5dd679b831b31040751813.png

Вроде как в голову приходит поэкспериментировать с line-height и всё отображается верно - https://jsfiddle.net/LordGuard/x2mfd01g/7/ , но если изменить размер шрифта выравнивание опять ломается (например при font-size: 12px), то есть такой способ не работает универсально для любого размера шрифта и требует подбора некого сферического числа в вакууме для каждого шрифта.

Если рядом со строкой поставить сточной блок высотой в 1ex - он выравнивается идеально относительно строчных букв этой строки, но вот как вписать эти строчные буквы в такой блок пока у меня не получается придумать.
5dd67d77142f6027182508.png
  • Вопрос задан
  • 100 просмотров
Пригласить эксперта
Ответы на вопрос 2
KornevaViktoria
@KornevaViktoria
Frontend Developer
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Сначала нужно сделать вертикальный ритм на странице (пример).
И уже только потом - выравнивать.

Посмотрите это: fittextjs.com
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы