Text not vertically centered inside content block / line height

This is a rather subtle issue. I couldn’t find anything because there are too many resources on the internet about how to center text vertically but these are irrelevant results.

This is a simple button with 1rem of top and bottom padding, that you can see in green in X-ray mode:


As you can see, the text is too high. I fixed it by changing top padding to 1.1rem and bottom padding to 0.9rem:


But it causes another issue: when centering elements vertically, the text inside the button is not aligned anymore with the text of the links outside:

Capture d’écran de 2023-09-29 17-03-37

And there is an issue with icon buttons in any case:

Capture d’écran de 2023-09-29 17-01-42

I want to solve this problem at the root or the closest possible to the root. There must be a setting I don’t know for this.


It may be because of the “line-height” of the text. Try to decrease the line height of the text inside the button. You can find this setting here:


Edit: I personally use Flexbox to center information both vertically and horizontally. See screenshot below for the settings: