How to find middle of a button on screen

Question

Ok I'm coding a button. I have done the box collision and all of the other stuff.

The problem I'm having is putting text in the middle of the button. No matter what I try it doesn't work :/ .

Please help I'm bad at math.

x = 120, y = 120, w = 120, h = 50 Screen dimensions = 480, 240

Is there an equation for this? I tried everything.

The best thing I have so far is

Brain.Screen.printAt(x + (w / 2, y + (h / 2), false, "Bruh");
// printAt args int x, int y, bool opaque, const char *text

The problem with that is the it's not at the exact center is a little bit to the top right.

https://i.stack.imgur.com/vA2UQ.png

Please provide enough code so others can better understand or reproduce the problem. — Community, Jul 14 '22 at 03:11
Does `textx=x+w/2-textwidth/2` and `texty=y+h/2-textheight/2` work? Or did I misunderstand what you are trying to do — Jerry Jeremiah, Jul 14 '22 at 03:37

score 1 · Accepted Answer · answered Jul 14 '22 at 03:36

You can compute the center-point of the button easily enough:

const int buttonCenterX = x+(w/2);
const int buttonCenterY = y+(h/2);

... for the next step you'll need to center the text around that point. If your GUI API doesn't provide a way to center the text for you, you can calculate the appropriate x/y position by hand, assuming you know (or have a way to calculate) the pixel-width and pixel-height of the text:

const int textHeight = [text string's height, in pixels]
const int textWidth  = [text string's width, in pixels]
const int textLeft = buttonCenterX-(textWidth/2);
const int textTop  = buttonCenterY-(textHeight/2);
drawTextAt(textLeft, textTop, textString);  // assuming drawTextAt() draws starting at the top-left of the string

How to find middle of a button on screen

1 Answers1