<!--
{
  "availability" : [
    "iOS: 13.0.0 -",
    "iPadOS: 13.0.0 -",
    "macCatalyst: 13.0.0 -",
    "macOS: 10.15.0 -",
    "tvOS: 13.0.0 -",
    "visionOS: 1.0.0 -",
    "watchOS: 6.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "SwiftUI",
  "identifier" : "/documentation/SwiftUI/Alignment",
  "metadataVersion" : "0.1.0",
  "role" : "Structure",
  "symbol" : {
    "kind" : "Structure",
    "modules" : [
      "SwiftUI"
    ],
    "preciseIdentifier" : "s:7SwiftUI9AlignmentV"
  },
  "title" : "Alignment"
}
-->

# Alignment

An alignment in both axes.

```
@frozen struct Alignment
```

## Overview

An `Alignment` contains a [`HorizontalAlignment`](/documentation/SwiftUI/HorizontalAlignment) guide and a
[`VerticalAlignment`](/documentation/SwiftUI/VerticalAlignment) guide. Specify an alignment to direct the behavior of
certain layout containers and modifiers, like when you place views in a
[`ZStack`](/documentation/SwiftUI/ZStack), or layer a view in front of or behind another view using
[`overlay(alignment:content:)`](/documentation/SwiftUI/View/overlay(alignment:content:)) or
[`background(alignment:content:)`](/documentation/SwiftUI/View/background(alignment:content:)), respectively. During layout,
SwiftUI brings the specified guides of the affected views together,
aligning the views.

SwiftUI provides a set of built-in alignments that represent common
combinations of the built-in horizontal and vertical alignment guides.
The blue boxes in the following diagram demonstrate the alignment named
by each box’s label, relative to the background view:

![A square that’s divided into four equal quadrants. The upper-](images/com.apple.SwiftUI/Alignment-1-iOS@2x.png)

The following code generates the diagram above, where each blue box appears
in an overlay that’s configured with a different alignment:

```
struct AlignmentGallery: View {
    var body: some View {
        BackgroundView()
            .overlay(alignment: .topLeading) { box(".topLeading") }
            .overlay(alignment: .top) { box(".top") }
            .overlay(alignment: .topTrailing) { box(".topTrailing") }
            .overlay(alignment: .leading) { box(".leading") }
            .overlay(alignment: .center) { box(".center") }
            .overlay(alignment: .trailing) { box(".trailing") }
            .overlay(alignment: .bottomLeading) { box(".bottomLeading") }
            .overlay(alignment: .bottom) { box(".bottom") }
            .overlay(alignment: .bottomTrailing) { box(".bottomTrailing") }
            .overlay(alignment: .leadingLastTextBaseline) { box(".leadingLastTextBaseline") }
            .overlay(alignment: .trailingFirstTextBaseline) { box(".trailingFirstTextBaseline") }
    }

    private func box(_ name: String) -> some View {
        Text(name)
            .font(.system(.caption, design: .monospaced))
            .padding(2)
            .foregroundColor(.white)
            .background(.blue.opacity(0.8), in: Rectangle())
    }
}

private struct BackgroundView: View {
    var body: some View {
        Grid(horizontalSpacing: 0, verticalSpacing: 0) {
            GridRow {
                Text("Some text in an upper quadrant")
                Color.gray.opacity(0.3)
            }
            GridRow {
                Color.gray.opacity(0.3)
                Text("More text in a lower quadrant")
            }
        }
        .aspectRatio(1, contentMode: .fit)
        .foregroundColor(.secondary)
        .border(.gray)
    }
}
```

To avoid crowding, the alignment diagram shows only two of the available
text baseline alignments. The others align as their names imply. Notice that
the first text baseline alignment aligns with the top-most line of text in
the background view, while the last text baseline aligns with the
bottom-most line. For more information about text baseline alignment, see
[`VerticalAlignment`](/documentation/SwiftUI/VerticalAlignment).

In a left-to-right language like English, the leading and trailing
alignments appear on the left and right edges, respectively. SwiftUI
reverses these in right-to-left language environments. For more
information, see [`HorizontalAlignment`](/documentation/SwiftUI/HorizontalAlignment).

### Custom alignment

You can create custom alignments — which you typically do to make use
of custom horizontal or vertical guides — by using the
[`init(horizontal:vertical:)`](/documentation/SwiftUI/Alignment/init(horizontal:vertical:)) initializer. For example, you can combine
a custom vertical guide called `firstThird` with the built-in horizontal
[`center`](/documentation/SwiftUI/HorizontalAlignment/center) guide, and use it to configure a [`ZStack`](/documentation/SwiftUI/ZStack):

```
ZStack(alignment: Alignment(horizontal: .center, vertical: .firstThird)) {
    // ...
}
```

For more information about creating custom guides, including the code
that creates the custom `firstThird` alignment in the example above,
see [`AlignmentID`](/documentation/SwiftUI/AlignmentID).

## Topics

### Getting top guides

[`topLeading`](/documentation/SwiftUI/Alignment/topLeading)

A guide that marks the top and leading edges of the view.

[`top`](/documentation/SwiftUI/Alignment/top)

A guide that marks the top edge of the view.

[`topTrailing`](/documentation/SwiftUI/Alignment/topTrailing)

A guide that marks the top and trailing edges of the view.

### Getting middle guides

[`leading`](/documentation/SwiftUI/Alignment/leading)

A guide that marks the leading edge of the view.

[`center`](/documentation/SwiftUI/Alignment/center)

A guide that marks the center of the view.

[`trailing`](/documentation/SwiftUI/Alignment/trailing)

A guide that marks the trailing edge of the view.

### Getting bottom guides

[`bottomLeading`](/documentation/SwiftUI/Alignment/bottomLeading)

A guide that marks the bottom and leading edges of the view.

[`bottom`](/documentation/SwiftUI/Alignment/bottom)

A guide that marks the bottom edge of the view.

[`bottomTrailing`](/documentation/SwiftUI/Alignment/bottomTrailing)

A guide that marks the bottom and trailing edges of the view.

### Getting text baseline guides

[`leadingFirstTextBaseline`](/documentation/SwiftUI/Alignment/leadingFirstTextBaseline)

A guide that marks the leading edge and top-most text baseline in a
view.

[`centerFirstTextBaseline`](/documentation/SwiftUI/Alignment/centerFirstTextBaseline)

A guide that marks the top-most text baseline in a view.

[`trailingFirstTextBaseline`](/documentation/SwiftUI/Alignment/trailingFirstTextBaseline)

A guide that marks the trailing edge and top-most text baseline in
a view.

[`leadingLastTextBaseline`](/documentation/SwiftUI/Alignment/leadingLastTextBaseline)

A guide that marks the leading edge and bottom-most text baseline
in a view.

[`centerLastTextBaseline`](/documentation/SwiftUI/Alignment/centerLastTextBaseline)

A guide that marks the bottom-most text baseline in a view.

[`trailingLastTextBaseline`](/documentation/SwiftUI/Alignment/trailingLastTextBaseline)

A guide that marks the trailing edge and bottom-most text baseline
in a view.

### Creating a custom alignment

[`init(horizontal:vertical:)`](/documentation/SwiftUI/Alignment/init(horizontal:vertical:))

Creates a custom alignment value with the specified horizontal
and vertical alignment guides.

[`horizontal`](/documentation/SwiftUI/Alignment/horizontal)

The alignment on the horizontal axis.

[`vertical`](/documentation/SwiftUI/Alignment/vertical)

The alignment on the vertical axis.


---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)