How to center horizontally two labels?

Question

I have pretty straightforward requirements where two labels must be centered horizontally. So, I have selected them and chose Editor->align->center horizontally. Then added top space to container constraint to both of them. I also need the labels to shrink/grow regarding content size. However, IB shows errors and several warnings. I could make the labels shrink/grow just by adding pin between them (horizontal space) but they will not be centered in that case. Here are the screenshots:

here are the errors and warnings:

UPDATE theraven gave an interesting suggestion to use dummy view for centering it horizontally and pinning two labels to it. I have removed all existing constraints, added this dummy view and center X + center Y constraints to it. Then pined two labels to it (added horizontal space constraints). However, I still get a bunch of errors and warnings:

UPDATE2 Just updating the question, but still no valid answer found. @Theraven workaround works for iPhone4, iPhone4S, iPhone5 and iPhone5S, however it's not real centering but rather a workaround. Therefore for iPhone6 and iPhone6 Plus it doesn't work as leading and trailing spaces will be fixed and won't automatically resize for larger width.

Answer 1

What you could do is add both labels to another view, like a container view. Then you need to center this one horizontally and add the necessary constraints. To add the containing UIView, you can select both labels, go to Editor -> Embed In -> View.

Then you would need to add constraints to make the containing view fit the two labels. So something like this:

First Label (left one):

• Leading Space to Superview
• Top and bottom Space to Superview
• Horizontal spacing to the next Label

Second Label:

• Trailing space to superview
• Top and Bottom to superview (or align top with the first one)

Then the containing view should resize as to fit both labels. Then all you need to do is add the top offset constraint for this container view and a horizontal alignment it in the parent view.

This way, the containing view will grow as much as it needs to fit both labels and the space between them and will always be centered in the parent view.

I took a screenshot of my test constraints in case it helps you more.

Hope this was what you were looking for.

Answer 2

Use centered UIStackView as a container for two labels with a spacing required.

Answer 3

To solve this use a blank UIView in between your two labels and center it horizontally. Then pin the two labels either side of the centered blank view. It is common convention to use spacer views like this in auto-layout.

Answer 4

I really don't like the idea of adding another view just for sake of estethic.

Another alternative is to horizontally-center the left view, and horizzontally space the right view of an amout X with the left one.

Then to give the horizontally-align contraint of the first view a negative value equal to the first view width plus half the views distance. Or use multipliers as said in a previous comment.

But this only works with fixed width views i guess.