How to use Stack View to center a button in a container?

Question

I am new to Stack Views so bear with me. I have an outer Stack View that contains all my elements as displayed in the image:

My problem is that the "Skip" button is now outside its container. I have tried to set constraints for "Center Horizontally" and "Center Vertically", but this causes my image to look like this:

As we can see, both my button and my container are no longer appearing in the Scene. What am I doing wrong here?

Here are my constraints for my container:

Here are my constraints for my "Skip" button:

did you give bottom or top space to your button and container? — Milan Gupta, Feb 25 '16 at 06:47
@MilanGupta Yes, my container has top space to the text and bottom space to the three circles a the bottom. — ML., Feb 25 '16 at 06:50
@MatthewLin its quite simple post the screenshot of your constraints . — Kishore Kumar, Feb 25 '16 at 06:56
@KishoreKumar Edited my OP to include the constraints for my container and button — ML., Feb 25 '16 at 07:04
@MatthewLin your button constraints are wrong wait i will update you — Kishore Kumar, Feb 25 '16 at 07:05
@KishoreKumar I haven't added the aspect ratio. What should I set the aspect to? — ML., Feb 25 '16 at 07:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/104506/discussion-between-kishore-kumar-and-matthew-lin). — Kishore Kumar, Feb 25 '16 at 07:30

score 3 · Accepted Answer · answered Feb 25 '16 at 07:42

Stack views essentially work on the principle of stacking objects which will obviously remove the prior constraints. The previous answer is correct but does not take into consideration stack views as asked by the question.

The simplest fix would to essentially "group" your button and image by placing them in a view and then adding the view into the stack view.

score 0 · Answer 2 · answered Feb 27 '16 at 02:35

0

I found a solution by first putting all the other elements in the Stack View first, then I put the button and its container in a View, and then I dragged and dropped the View into the Stack View.

answered Feb 27 '16 at 02:35

ML.

589
1
9
33

How to use Stack View to center a button in a container?

2 Answers2