Answered

How can I center and middle align an object inside of another object on the page?

(1) Share

Report

Posted on by Community Power Pla... Microsoft Employee

I have an icon I want to place inside of a button with a border. I want to perfectly position the icon inside of the button no matter where I drag the button on the canvas. I imagine the code for X and Y would be something involving the name of the object and the property (e.g., bttnAdd.X).

Categories:

Building Power Apps

All responses (5)

Answers (1)

Sort by

Verified answer

Pstork1 69,665 Most Valuable Professional on at

Like
a
(15)

Report
Copy link

Link copied!
Let's say the button is called Button1 and the Icon is called Icon1. then the X and Y formulas for Icon1 would be the following:

Button1.X + ((Button1.Width - Icon1.Width)/2) Button1.Y + ((Button1.Height - Icon1.Height)/2)

As long as you don't set the Height and Width of the Icon to be greater than the Height and Width of the button this will center it.
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

That's perfect. Many thanks!
dignus93 10 on at

Like
a
(1)

Report
Copy link

Link copied!

This works perfect when two Elements are brothers. It stop working when one is the father and the other is the son. I really don't know why and I would like to understand. I explain Better:

I want OfferBodyIn (a container) to be in the center of OfferBody (another container).

I try this
OfferBodyIn.X = OfferBody.X + ((OfferBody.Width - OfferBodyIn.Width)/2)
OfferBodyIn.Y = OfferBody.Y + ((OfferBody.Height - OfferBodyIn.Height)/2)
and that
OfferBodyIn.X = Parent.X + ((Parent.Width - OfferBodyIn.Width)/2)
OfferBodyIn.Y = Parent.Y + ((Parent.Height - OfferBodyIn.Height)/2)

If the two containers are brother it's perfect (I guess I will leave it like that)
Brothers

But if I put BodyIn inside Body, the first is not centered anymore
suspiciously if I put Body in the position 0,0 it worked good.
Pstork1 69,665 Most Valuable Professional on at

Like
a
(2)

Report
Copy link

Link copied!
If one container is inside the other than the X and Y coordinates of the inner container are already relative to the outer one. So the formulas should just be

OfferBodyIn.X = (Parent.Width - OfferBodyIn.Width)/2 OfferBodyIn.Y = (Parent.Height - OfferBodyIn.Height)/2
User9911 2 on at

Like
a
(0)

Report
Copy link

Link copied!

When I am setting Screen H & W as max as per Design then the screen is responsive, but the objects in the screens are aligned to top left of the screen automatically how can I centralize them?