Text Alignment in SwiftUI: Complete Guide with Examples

Text Alignment in SwiftUI: From Beginner to Pro

Have you ever stared at the screen, trying to figure out why your multiline text in SwiftUI stubbornly sticks to the left edge, even though you explicitly specified .center? A familiar pain. The question "SwiftUI text-alignment" gathers thousands of views on Stack Overflow for a reason — it's one of those little things that can ruin an entire interface.

In this article, we'll break down all the ways to manage text alignment in SwiftUI. I'll show you not only basic techniques but also life hacks that will save you hours of googling. Let's go!

1. The Basics: .multilineTextAlignment

The very first modifier you'll encounter is multilineTextAlignment. It works specifically with multiline text, but actually affects single-line text as well. Let's look at an example:

import SwiftUI\n\nstruct AlignmentExample: View {\n    var body: some View {\n        VStack(spacing: 20) {\n            Text("This text is aligned to the left. By default in SwiftUI, text is pressed to the left side.")\n                .multilineTextAlignment(.leading)\n                .frame(maxWidth: 250)\n                .border(Color.gray)\n            \n            Text("This text is centered. Perfect for headings and quotes.")\n                .multilineTextAlignment(.center)\n                .frame(maxWidth: 250)\n                .border(Color.gray)\n            \n            Text("This text is aligned to the right. Often used in internationalization for right-to-left languages.")\n                .multilineTextAlignment(.trailing)\n                .frame(maxWidth: 250)\n                .border(Color.gray)\n        }\n        .padding()\n    }\n}

Important: multilineTextAlignment only works inside a container that limits the text width. If you don't set a frame, the text will take up all available width, and alignment may not work as expected.

2. Difference Between .leading and .left

In SwiftUI, there are .leading, .trailing, .left, and .right. What's the difference?

\n
• .leading / .trailing — adaptive values. In left-to-right languages (English, Russian) .leading = .left, .trailing = .right. In Arabic or Hebrew — the opposite.
\n
• .left / .right — hard binding to a side. They don't change depending on locale.
\n

Apple recommends using .leading and .trailing for internationalization support. But if you specifically need "always left" — use .left.

3. Text Alignment Inside Containers

Often the problem isn't with the Text itself, but how it's positioned inside a VStack, HStack, or ZStack. This is where the alignment parameter of stacks comes into play.

3.1. VStack and HStack

struct StackAlignmentExample: View {\n    var body: some View {\n        VStack(alignment: .leading, spacing: 10) {\n            Text("Title")\n                .font(.title)\n            Text("This is a description that should start from the same left boundary as the title. Without explicit stack alignment, the text might shift.")\n                .font(.body)\n        }\n        .frame(maxWidth: 300)\n        .padding()\n        .background(Color.yellow.opacity(0.3))\n        .cornerRadius(10)\n    }\n}

Pro tip: If you want all text inside a VStack to be centered, but each element can have its own alignment — combine the stack's alignment with multilineTextAlignment on specific