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

 

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.



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

 

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