I tried using flexbox and using vertical-align, it doesn’t help.Font: Futura


Example: https://jsfiddle.net/LordGuard/7u5orb2q/
46

2 Answers 2

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 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:
  • https://jsfiddle.net/LordGuard/7u5orb2q/ – Create Your Nov 7 '19 at 14:51
  • The problem is that the indentation in 1.9px is not enough, and with the indentation of 2px on the desktop, the text is already shifted even lower.That is, there is no such indentation in which alignment would work the same way there and there. – Create Your Nov 7 '19 at 19:24
  • Do not use absolute values ​​(px), take the height of the letters(em) as the basis:
    margin-top: 0.2em;     – Mysterious Monkey Nov 7 '19 at 19:46
Add to the button line-height: 1 so the text will occupy 100% of the text height.