Fix: UIButton Title Is Centered Instead of Left-Aligned in Swift

Fix: UIButton Title Is Centered Instead of Left-Aligned in Swift

Written by

in

Quick answer: Set button.contentHorizontalAlignment = .left (or .leading for right-to-left support) to pin the title to the left edge. Then add a left inset so the text doesn’t touch the border: contentEdgeInsets on older systems, or configuration.contentInsets with UIButton.Configuration on iOS 15 and later.

Why this happens

A UIButton is built to show a title, and often an image, centered inside its bounds. By default contentHorizontalAlignment is .center. Making the button wider (for example 250 points to hold an email address) just leaves more empty space on both sides of the text.

titleLabel is not the property to change here. The button lays out its title and image as one content block and positions that block using contentHorizontalAlignment and contentVerticalAlignment. Setting titleLabel.textAlignment does nothing useful, because the label shrinks to fit its text.

How to fix it

1. Set contentHorizontalAlignment

This is the direct fix and works on every iOS version.

let emailButton = UIButton(type: .system)
emailButton.frame = CGRect(x: 5, y: 30, width: 250, height: 44)
emailButton.setTitle("[email protected]", for: .normal)
emailButton.titleLabel?.font = .systemFont(ofSize: 12.5)
emailButton.contentHorizontalAlignment = .left

Objective-C:

emailBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;

The text now sits flush against the left edge of the button.

2. Add a left inset so the text doesn’t touch the border

With left alignment the text starts at x = 0 inside the button. Add padding with contentEdgeInsets:

emailButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0)

Objective-C:

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

contentEdgeInsets has been deprecated since iOS 15 in favor of UIButton.Configuration. It still works for classic buttons, but use the next option for new code.

3. Use UIButton.Configuration on iOS 15 and later

With a configuration, insets live in contentInsets. You still set the alignment on the button itself.

var config = UIButton.Configuration.plain()
config.title = "[email protected]"
config.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 0)

let emailButton = UIButton(configuration: config)
emailButton.contentHorizontalAlignment = .leading

If the title ignores your alignment, check that the button is actually wider than its content. A button that is sized to fit its text has no spare room to align within.

4. Use .leading for right-to-left languages

.left always means the physical left edge. If your app supports Arabic or Hebrew, use .leading so the title follows the reading direction:

emailButton.contentHorizontalAlignment = .leading

5. Set it in Interface Builder

If you design the button in a storyboard or XIB, you don’t need code.

  1. Select the button and open the Attributes inspector.
  2. Find the Control section and set Alignment (horizontal) to the left option.
  3. Open the Size inspector, choose Content Insets if available for your button style, and set the left value to indent the text.

The same alignment setting also moves an image in the button, so you can align an icon to the left or right the same way.

6. Image and title in the same button

The alignment applies to the combined image-and-title block. If your button has both, they move together to the left. To change the gap between them, use imageEdgeInsets and titleEdgeInsets on classic buttons, or imagePadding on UIButton.Configuration:

config.image = UIImage(systemName: "envelope")
config.imagePadding = 8

How to prevent it

  • Remember that button content is aligned by the button, not the label. Reach for contentHorizontalAlignment first.
  • Prefer .leading and .trailing over .left and .right so layouts work in right-to-left languages.
  • Add content insets whenever you left-align. Text against the border looks like a bug.
  • On iOS 15+ projects, use UIButton.Configuration for padding instead of deprecated edge-inset properties.
  • Give the button a real width through Auto Layout or a frame. Alignment has no visible effect on a button that hugs its content.

FAQ

Why does titleLabel.textAlignment not left-align my button title?

The title label is sized to fit its text, so there is no extra space for the text to align within. The button positions the label as part of its content, which is why contentHorizontalAlignment is the right property.

How do I right-align a UIButton title?

Set contentHorizontalAlignment = .right, or .trailing for right-to-left support. Use a right content inset to add padding from the edge.

Can I left-align the title in SwiftUI instead?

Yes. Give the button label a flexible frame, for example Button { } label: { Text("Email").frame(maxWidth: .infinity, alignment: .leading) }. That makes the label fill the available width and align its text to the leading edge.

Sources & credits

Parts of this guide are adapted from content licensed under CC BY-SA 4.0; this article is shared under the same license.