How to vertically align text?

[AzraelTycka]

Hello,

I have encountered a problem. When I add text to stage I can get it vertically centered, could you please advise me a way?

I tried the same way as examples show, but that doesn't work for me.

In the picture you can see the result I get. I want to center (horizontally and vertically) on the purple boxes in background.

I don't know how to achieve that, as you can see I set background color to black to see how the text is positioned. There is obviously larger space below the numbers comparing it to the space above them. Is there a way to set this equal?

        var style = {font: 'bold 25px Times New Roman', fill: '#ffffff', backgroundColor: '#000000'}
        var text = this.add.text(Math.floor(start.x), Math.floor(start.y), number, style);
        text.anchor.set(0.5);
        text.x = Math.floor(start.x + image.width / 2);
        text.y = Math.floor(start.y + image.height / 2);

Thank you very much for your advice.

EDIT

Just to be clear, I'm using the latest Phaser version.

I also tried:

        text.setTextBounds(0, 0, 30, 30);
        text.boundsAlignV = 'middle';

Which resulted in the bottom of the black area (text background colored) being aligned with the bottom of my box (which is 30 x 30) as seen in the second picture.

[AzraelTycka]

I'm still having this kind of issue does anyone know how to vertically center text. Basically I would like to cut off the black area below and above the text which is larger than the text itself and then center it, is there an option I keep missing in phaser or is the only option to move text down a few pixels (though procedural generation doesn't help much with different sizes of text so ..)?

I checked the examples but that centers the black area but not only the text itself, if I wanted to have a number of the same size of my container and tried to center it like that it wouldn't be centered because the number on my picture has less black area above than below.

Thanks.