Center a label

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By MOSN

Would be real neat if I could center a label around it’s position. Centering the text on the label is not enough, since changing the scale of the label will then cause the text to move. I’ve tried using containers, but they cause more problems than they solve.

:bust_in_silhouette: Reply From: Zylann

I agree it’s quite inconvenient at first, controls are always relative to something so it’s not immediately obvious, but there are ways to go:

As a workaround, you could place a label as child of a Node2D and scale the Node2D instead. But you still need to center it somehow.

Another way is to use a tiny control of size 1,1 as parent (effectively making it a point) so that the Label’s anchors can be used to center it. However it makes it impossible to move in the editor because the parent has no size. You could also go the other way and make a big parent, but that would be the same as using a CenterContainer.

Another way which I think is easiest: give the label a big enough fixed size, like 500x500 (or lower if your text isnt too big). Then set the pivot offset to half, 250x250, and center the text by setting align and valign. Now you get a bounding rectangle larger than the text, but the text will be centered and scale by the center :stuck_out_tongue:

Last solution would be a custom Node2D script which draws centered text.

But depending on your situation there could be other solutions.

Thanks, the pivot offset option seems to work for what I’m trying to do :slight_smile:

MOSN | 2019-04-24 14:11

:bust_in_silhouette: Reply From: voidshine

CenterContainer is working perfectly for me in 3.2.3. I set it up to be big enough to hold whatever text will be contained, then place the center-aligned label as a child. Now the container can move around and the text within will remain centered and scale about the center.

If you want the convenience of controlling the CenterContainer’s center point directly, just position it within a Node2D and move the parent node around. Example:

  • Node2D (position: (500, 500))
    • CenterContainer (rect size: (300, 100), rect position: (-150, -50))
      • Label (align: Center, valign: Center)

The text will be centered and scale about point (500, 500). There are other ways; you can omit the Node2D and work with the container directly, but I find this structure intuitive.

:bust_in_silhouette: Reply From: CakeLover

I don’t know how valid this is but as of version 3.5 you can also center by setting grow_vertical and grow_horizontal to ‘Both’ as such:

enter image description here

Bonus Tip:
if you’re like me and trying to make a dialogue system of sort you might want to set grow_horizontal to ‘Both’ and grow_vertical to ‘Begin’ that way the text always stays on top of the node and doesn’t overlap with your character

Note that you have to set “layout mode” to “Anchors” and “Anchor preset” to “custom” for these options to show up.

grixm | 2023-04-29 17:56

1 Like