I tried using flexbox and using vertical-align, it doesn’t help.Font: Futura
Example: https://jsfiddle.net/LordGuard/7u5orb2q/
2 Answers
Paste in the question a piece of CSS code responsible for the style of the buttons.
#2
In your case, what is marked as MOBILE is the correct option, since the vertical center of the letter is measured not in capital letters, but in capital letters.A small indent will fix everything
If the indentation does not suit you, and you are not reluctant to look for an alternative font with all formats for all browsers, you can artificially reduce the height of the letters by equalizing the height of the uppercase and lowercase
Here is an interesting article on this topic:
https://positive-js.github.io/blog/css-font-metric...
Metrics of your font for self-calculation of indents:
#2
In your case, what is marked as MOBILE is the correct option, since the vertical center of the letter is measured not in capital letters, but in capital letters.A small indent will fix everything
margin-top: 0.2em;
.A in DESKTOP versions just the screen resolution is too small to see that the text is also slightly above the center of the button.If the indentation does not suit you, and you are not reluctant to look for an alternative font with all formats for all browsers, you can artificially reduce the height of the letters by equalizing the height of the uppercase and lowercase
font-variant-caps: all-small-caps;
, but they will already be small in the middle, though.Here is an interesting article on this topic:
https://positive-js.github.io/blog/css-font-metric...
Metrics of your font for self-calculation of indents:
Add to the button
line-height: 1
so the text will occupy 100% of the text height.
margin-top: 0.2em;
– Mysterious Monkey Nov 7 '19 at 19:46