Jump to content

How to vertically align text?


AzraelTycka
 Share

Recommended Posts

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?

text.jpg

        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.

text2.jpg.ecb3fce428028576682fc65f86d2f1

Link to comment
Share on other sites

  • 1 month later...

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...