Text not centered despite text-anchor=middle

[ata1704]

Hi. I'm developing a watch face right know. I still don't get over the fact that it's not possible to vertically align a text, but at least it's possible to do that horizontally...or maybe not?

The white Lines are made with Photoshop and have the exact same length. As you can see, the text is not fully centered horizontally, because the line on the right is crossing the zero.

How can something so crucial like centering a text horizontally and vertically be that hard. No wonder that there are so few good watch faces.

[Guy_]

Hi @ata1704 - have you tried using fixed width numbers and defining a text-length? Do you still get the same problem?

Isn't it possible to align text vertically based on it's point of origin and height ?

[SunsetRunner]

Hi @ata1704 perhaps it is more a problem of the font, ie each characters individual left/right spacing (as @Guy_ already implemented).
So to be sure the text is visually centered, you might need to use getBBox() to evaluate its actual (visible) width and calculate the center using this value manually.

Edit: you can use getBBox() also for centering vertically evaluating .height.

[Guy_ · Accepted solution]

@ata1704- see also https://dev.fitbit.com/build/guides/user-interface/css/#monospace-numbers if it is just a number field, it might help.

[ata1704]

I could fix it monospace numbers. But thank you for mentioning getBBox(). This helped a lot to fix other issues.

But I still think it's sort of strange that texts aren't just basic text boxes, where you can define a width and height and align the text in that box vertically and horizontally just by using a tag like "center". 

[SunsetRunner]

You can define an <svg> element to wrap your text or any element and set it to 50%,50%.

I found this really handy for positioning stuff.

But I don't think it would solve the centering issue (which also might be just a rounding if center doesn't match an integer. Just a guess)