Canvas texts are messed up when viewed by phone

Greetings, I've build a small game and I've used four sprites as buttons on my main menu. I used canvas' text to write on them ( I know that buttons have text property, that's not the point here ), I position the text perfectly inside the sprites on my unity editor.

When I launch the app on any phone everything is messed up, is there a way to keep proportion or I need to use something else ( like buttons' text property and/or imported sprite with text on it as img).

I don't know if Rect Transform component (and choosing a box - middle , left , center etc. for position ) is going to align it perfectly.

Thanks.

 

In the UI, RectTransforms will position themselves with respect to their parent, using the options you define in the RectTransform component.

That is why the default button that is created when you use the right click menu UI->Button has a child object with a Text component. The child object is anchored to the parent, and will move and resize based on the settings on the RectTransform.

So if you want your text to always be aligned and centered to your Button, make it a child of the Button, give it the anchors "Stretch", and set the top/bottom/left/right offsets to 0. That will make your Text object the exact same size as the parent Button always, and if the Text component is set to be centered, then it will be centered within those bounds.

If you want the text to have an exact size bounds, for text wrapping or something, you can use the "Center" anchor selection and a position (0,0), that will anchor the text object's position to the center of the parent, but won't adjust the size at all.