GUI - Text not vertically centered

Questions
1

Hi community!

Been having this issue for quite some time:
I have an UI in the works and having trouble getting text vertically centered…

image
image1664×674 56.5 KB

Here is the a playground
Babylon.js Playground - #N92A8Y

What am I missing?

2

cc @georgie

3

Hey @SamuelSousa - if you’re talking about the text not being perfectly vertically centered inside of the rectangle, I believe that’s because font centering is based on the font’s line box, which accounts for characters that can descend below the bottom of the line (such as “y”). You see the same behavior in HTML - here’s a jsfiddle that repros the same thing: Set large red box with center text - JSFiddle - Code Playground

If you want that exact string to be perfectly vertically centered in this particular case, you could manually bump it down by setting text.paddingTop to something like “2px”.

Does that answer your question?

Thanks!

4

Thank you very much, that’s exactly what I meant, totally forgot about the descenders.
Was expecting a perfect vertical centering.

This particular font give the impression that the baseline is defined by “Q” which fills the gap below:

5

Glad I could help!