cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
pwrappr01
Helper V
Helper V

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

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).

1 ACCEPTED SOLUTION

Accepted Solutions
Pstork1
Dual Super User III
Dual Super User III

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. 



-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

View solution in original post

5 REPLIES 5
Pstork1
Dual Super User III
Dual Super User III

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. 



-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

View solution in original post

That's perfect. Many thanks!

dignus93
Frequent Visitor

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)
BrothersBrothers

 

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
Dual Super User III
Dual Super User III

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


-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.
User9911
New Member

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?

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

PowerPlatform 768x460.png

Microsoft Learn

Check out our new Discover Your Career Path blog post series and get all the details.

Users online (3,172)