Center Multi-Line Text on UIButton using IB

Question

How do you center text line-by-line in a UIButton using Interface Builder? I am scouring the options and just don't see it. Here's the button:

Answer 1

You can't set the text to be centered in your nib. But you can change the alignment in your code:

- (void)viewDidLoad {
    [super viewDidLoad];

    self.myButton.titleLabel.textAlignment = UITextAlignmentCenter;
}

Answer 2

I know this is an old question, but I came across it in my own attempt to center the multi-line text of a UIButton in IB. What I found is that by default, when "title" is set to "plain" and "line break" is set to "word wrap" the longest line of the title text is centered and the other lines are left justified to this line (similar to the OP's screen capture).

In order to have all the lines centered properly, "title" needs to be changed to "attributed." This provides many more options to customize the appearance of the title text. Center each of the lines of text (you can now actually change the alignment for each line individually). Also be sure to set "line breaking" to "word wrap" under "more..." above the text. There seems to be a bug with how this line breaking option behaves, at least in Xcode 4.5 at this time, because the text on the button in IB will look incorrect, truncating everything except the first line. It seems the "word wrap" and truncate options are interpreted backwards in IB, but if you run the app it behaves correctly in the simulator.

Answer 3

Actually you can do it in interface builder.

Just set Title to "Attributed" and then choose center alignment.

@from comments : To wrap you need to set Line Break to Character Wrap or Word Wrap.

P.S : This might not render in xcode. But, it will work at runtime.

Answer 4

You can set the center multiline text in UIButton through storyboard.

This is how you make the text have two or more lines.

Set the below key Path at

Identity Inspector --> User defined runtime attributes --> add new key value pair with below

titleLabel.textAlignment - NSNumber - 1

and

 titleLabel.numberOfLines - NSNumber - 5 - or use "0" meaning "any number"

It will look like this:

Note that (2016) unfortunately it does not actually show the two or more lines of text in Storyboard (you see only the first one), but it works perfectly when you run in simulator or device.

Answer 5

For IB set Title to "Attributed" and select center alignment (like Alexander Danilov suggested)

But if you want to do it in code using Swift 4:

// center button text
yourButton.titleLabel?.textAlignment = .center 

// enable multiline if needed
yourButton.titleLabel?.numberOfLines = 0 

Answer 6

Not all options are done using Interface Builder therefore you must do some of them by coding, and usually we do them inside the function viewDidLoad.

To center your text inside a button by code you can use the following:

button1.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;

You can use the same technique to align the text to any direction, for example to the left:

button1.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;

But this will take the text too much to the left and you might want to have some space before it keeping the alignment to the left, so you add an inset after the aligning code as follows:

button1.contentEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);

In this case we are pushing the text from the Y axis by 10 points. I say here points not pixels because as you know Apple uses the points technique to measure distances to be able to adapt easily between normal display and retina display (where retina is 2 times the normal one).

Answer 7

I haven't tried it out yet, but I think a way to do it might be create a CGRect on top of your button, then use it as a frame, create a label, and then you can play with the label, set the textAlignment property to be UITextAlignmentCenter, and set the background color to be clear.

This works with uitableview but I don't know whether that will work for button. Hope this helps.