The alignment module provides types for controlling how widgets are positioned within their parent containers.
Alignment Enum
The main Alignment enum represents alignment on a single axis (horizontal or vertical).
#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
pub enum Alignment {
Start,
Center,
End,
}
Variants
Align at the start of the axis (left for horizontal, top for vertical)
Align at the center of the axis
Align at the end of the axis (right for horizontal, bottom for vertical)
use iced_core::Alignment;
let align_start = Alignment::Start;
let align_center = Alignment::Center;
let align_end = Alignment::End;
Horizontal Alignment
The Horizontal enum provides semantic names for horizontal alignment.
#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
pub enum Horizontal {
Left,
Center,
Right,
}
Variants
Example:
use iced_core::alignment::Horizontal;
let left = Horizontal::Left;
let center = Horizontal::Center;
let right = Horizontal::Right;
Converting to Alignment
Horizontal can be converted to Alignment:
impl From<Horizontal> for Alignment {
fn from(horizontal: Horizontal) -> Self {
match horizontal {
Horizontal::Left => Self::Start,
Horizontal::Center => Self::Center,
Horizontal::Right => Self::End,
}
}
}
use iced_core::{Alignment, alignment::Horizontal};
let horizontal = Horizontal::Left;
let alignment: Alignment = horizontal.into();
assert_eq!(alignment, Alignment::Start);
Converting from Alignment
Alignment can be converted to Horizontal:
impl From<Alignment> for Horizontal {
fn from(alignment: Alignment) -> Self {
match alignment {
Alignment::Start => Self::Left,
Alignment::Center => Self::Center,
Alignment::End => Self::Right,
}
}
}
Vertical Alignment
The Vertical enum provides semantic names for vertical alignment.
#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
pub enum Vertical {
Top,
Center,
Bottom,
}
Variants
Example:
use iced_core::alignment::Vertical;
let top = Vertical::Top;
let center = Vertical::Center;
let bottom = Vertical::Bottom;
Converting to Alignment
Vertical can be converted to Alignment:
impl From<Vertical> for Alignment {
fn from(vertical: Vertical) -> Self {
match vertical {
Vertical::Top => Self::Start,
Vertical::Center => Self::Center,
Vertical::Bottom => Self::End,
}
}
}
use iced_core::{Alignment, alignment::Vertical};
let vertical = Vertical::Top;
let alignment: Alignment = vertical.into();
assert_eq!(alignment, Alignment::Start);
Converting from Alignment
Alignment can be converted to Vertical:
impl From<Alignment> for Vertical {
fn from(alignment: Alignment) -> Self {
match alignment {
Alignment::Start => Self::Top,
Alignment::Center => Self::Center,
Alignment::End => Self::Bottom,
}
}
}
Usage in Layouts
Alignment is typically used when positioning widgets within container widgets like Row, Column, and Container.
Example: Aligning a button in a container
use iced::widget::container;
use iced_core::{alignment::Horizontal, alignment::Vertical};
container(button("Click me"))
.align_x(Horizontal::Center)
.align_y(Vertical::Center)
use iced::widget::row;
use iced_core::Alignment;
row([
text("First"),
text("Second"),
text("Third"),
])
.align_items(Alignment::Center)
Design Philosophy
The alignment system uses a two-tier approach:
- Generic Alignment: The
Alignment enum uses Start, Center, and End to be axis-agnostic
- Semantic Types: The
Horizontal and Vertical enums provide clearer, direction-specific names
This design allows you to write both generic layout code (using Alignment) and more expressive UI code (using Horizontal and Vertical), with seamless conversion between the two. 