Alignment in UI

Hi,

I am new to working with the UI. So I am creating an alphabetical keyboard on screen consisting of 26 buttons. I arranged the buttons into 3 rows as you see in the hierarchy ( keyboard rows 1,2, and 3). I was planning on using the first gameobject, keyboard, as a vertical layout group, and the 3 rows would be horizontal layout groups as you see in the inspector. Now that I've done that, I want to arrange the 3 rows so they are centered in a box. As you can see the rows are currently not centered. I thought I could do that using the vertical hierarchy but I am having some difficulty. Can anyone recommend a solution? Thanks.

9270351--1297953--userint0.png

9270351--1297959--userint1.png

9270351--1297959--userint1.png

I guess it's a problem because your rows don't have the right width.
For example, the 'keyboard row1' has about 480*43.5 size, but it is set to about 138.5*108 like below pictures.

9270432--1297983--upload_2023-9-4_13-43-30.png9270432--1297986--upload_2023-9-4_13-43-51.png

So I think you need a content size fitter component for each row.

9270432--1297983--upload_2023-9-4_13-43-30.png
9270432--1297986--upload_2023-9-4_13-43-51.png

1 Like

Thanks I adjusted the width and that seems to have done the trick.:)

1 Like