Refactor alignment types into an `alignment` module

54 files changed, 401 insertions, 376 deletions

diff --git a/core/src/align.rs b/core/src/align.rs
deleted file mode 100644
index ad0d8a25..00000000
--- a/core/src/align.rs
+++ /dev/null
@@ -1,64 +0,0 @@
-/// Alignment on an axis of a container.
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
-pub enum Align {
-    /// Align at the start of the axis.
-    Start,
-
-    /// Align at the center of the axis.
-    Center,
-
-    /// Align at the end of the axis.
-    End,
-}
-
-/// Alignment on the cross axis of a container.
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
-pub enum CrossAlign {
-    /// Align at the start of the axis.
-    Start,
-
-    /// Align at the center of the axis.
-    Center,
-
-    /// Align at the end of the axis.
-    End,
-
-    /// Fill the entire axis.
-    Fill,
-}
-
-impl From<Align> for CrossAlign {
-    fn from(align: Align) -> Self {
-        match align {
-            Align::Start => Self::Start,
-            Align::Center => Self::Center,
-            Align::End => Self::End,
-        }
-    }
-}
-
-/// The horizontal alignment of some resource.
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
-pub enum HorizontalAlignment {
-    /// Align left
-    Left,
-
-    /// Horizontally centered
-    Center,
-
-    /// Align right
-    Right,
-}
-
-/// The vertical alignment of some resource.
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
-pub enum VerticalAlignment {
-    /// Align top
-    Top,
-
-    /// Vertically centered
-    Center,
-
-    /// Align bottom
-    Bottom,
-}
diff --git a/core/src/alignment.rs b/core/src/alignment.rs
new file mode 100644
index 00000000..8c561d9d
--- /dev/null
+++ b/core/src/alignment.rs
@@ -0,0 +1,63 @@
+//! Align and position widgets.
+
+/// Alignment on the axis of a container.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
+pub enum Alignment {
+    /// Align at the start of the axis.
+    Start,
+
+    /// Align at the center of the axis.
+    Center,
+
+    /// Align at the end of the axis.
+    End,
+
+    /// Fill the entire axis.
+    Fill,
+}
+
+impl From<Horizontal> for Alignment {
+    fn from(horizontal: Horizontal) -> Self {
+        match horizontal {
+            Horizontal::Left => Self::Start,
+            Horizontal::Center => Self::Center,
+            Horizontal::Right => Self::End,
+        }
+    }
+}
+
+impl From<Vertical> for Alignment {
+    fn from(vertical: Vertical) -> Self {
+        match vertical {
+            Vertical::Top => Self::Start,
+            Vertical::Center => Self::Center,
+            Vertical::Bottom => Self::End,
+        }
+    }
+}
+
+/// The horizontal [`Alignment`] of some resource.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Horizontal {
+    /// Align left
+    Left,
+
+    /// Horizontally centered
+    Center,
+
+    /// Align right
+    Right,
+}
+
+/// The vertical [`Alignment`] of some resource.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Vertical {
+    /// Align top
+    Top,
+
+    /// Vertically centered
+    Center,
+
+    /// Align bottom
+    Bottom,
+}
diff --git a/core/src/lib.rs b/core/src/lib.rs
index b0aa4e12..1f58a8cd 100644
--- a/core/src/lib.rs
+++ b/core/src/lib.rs
@@ -14,11 +14,11 @@
 #![deny(unused_results)]
 #![forbid(unsafe_code)]
 #![forbid(rust_2018_idioms)]
+pub mod alignment;
 pub mod keyboard;
 pub mod mouse;
 pub mod text;
 
-mod align;
 mod background;
 mod color;
 mod font;
@@ -29,7 +29,7 @@ mod rectangle;
 mod size;
 mod vector;
 
-pub use align::{Align, CrossAlign, HorizontalAlignment, VerticalAlignment};
+pub use alignment::Alignment;
 pub use background::Background;
 pub use color::Color;
 pub use font::Font;
diff --git a/examples/bezier_tool/src/main.rs b/examples/bezier_tool/src/main.rs
index b17f5726..35b5182c 100644
--- a/examples/bezier_tool/src/main.rs
+++ b/examples/bezier_tool/src/main.rs
@@ -1,7 +1,6 @@
 //! This example showcases an interactive `Canvas` for drawing Bézier curves.
 use iced::{
-    button, Button, Column, CrossAlign, Element, Length, Sandbox, Settings,
-    Text,
+    button, Alignment, Button, Column, Element, Length, Sandbox, Settings, Text,
 };
 
 pub fn main() -> iced::Result {
@@ -52,7 +51,7 @@ impl Sandbox for Example {
         Column::new()
             .padding(20)
             .spacing(20)
-            .align_items(CrossAlign::Center)
+            .align_items(Alignment::Center)
             .push(
                 Text::new("Bezier tool example")
                     .width(Length::Shrink)
diff --git a/examples/color_palette/src/main.rs b/examples/color_palette/src/main.rs
index 90277186..ad3004b0 100644
--- a/examples/color_palette/src/main.rs
+++ b/examples/color_palette/src/main.rs
@@ -1,8 +1,7 @@
 use iced::canvas::{self, Cursor, Frame, Geometry, Path};
 use iced::{
-    slider, Canvas, Color, Column, CrossAlign, Element, HorizontalAlignment,
-    Length, Point, Rectangle, Row, Sandbox, Settings, Size, Slider, Text,
-    Vector, VerticalAlignment,
+    alignment, slider, Alignment, Canvas, Color, Column, Element, Length,
+    Point, Rectangle, Row, Sandbox, Settings, Size, Slider, Text, Vector,
 };
 use palette::{self, Hsl, Limited, Srgb};
 use std::marker::PhantomData;
@@ -163,8 +162,8 @@ impl Theme {
         });
 
         let mut text = canvas::Text {
-            horizontal_alignment: HorizontalAlignment::Center,
-            vertical_alignment: VerticalAlignment::Top,
+            horizontal_alignment: alignment::Horizontal::Center,
+            vertical_alignment: alignment::Vertical::Top,
             size: 15.0,
             ..canvas::Text::default()
         };
@@ -206,7 +205,7 @@ impl Theme {
             });
         }
 
-        text.vertical_alignment = VerticalAlignment::Bottom;
+        text.vertical_alignment = alignment::Vertical::Bottom;
 
         let hsl = Hsl::from(Srgb::from(self.base));
         for i in 0..self.len() {
@@ -298,7 +297,7 @@ impl<C: 'static + ColorSpace + Copy> ColorPicker<C> {
 
         Row::new()
             .spacing(10)
-            .align_items(CrossAlign::Center)
+            .align_items(Alignment::Center)
             .push(Text::new(C::LABEL).width(Length::Units(50)))
             .push(slider(s1, cr1, c1, move |v| C::new(v, c2, c3)))
             .push(slider(s2, cr2, c2, move |v| C::new(c1, v, c3)))
diff --git a/examples/counter/src/main.rs b/examples/counter/src/main.rs
index 710849ea..931cf5e1 100644
--- a/examples/counter/src/main.rs
+++ b/examples/counter/src/main.rs
@@ -1,5 +1,5 @@
 use iced::{
-    button, Button, Column, CrossAlign, Element, Sandbox, Settings, Text,
+    button, Alignment, Button, Column, Element, Sandbox, Settings, Text,
 };
 
 pub fn main() -> iced::Result {
@@ -44,7 +44,7 @@ impl Sandbox for Counter {
     fn view(&mut self) -> Element<Message> {
         Column::new()
             .padding(20)
-            .align_items(CrossAlign::Center)
+            .align_items(Alignment::Center)
             .push(
                 Button::new(&mut self.increment_button, Text::new("Increment"))
                     .on_press(Message::IncrementPressed),
diff --git a/examples/custom_widget/src/main.rs b/examples/custom_widget/src/main.rs
index ce7fe9af..c9ad1905 100644
--- a/examples/custom_widget/src/main.rs
+++ b/examples/custom_widget/src/main.rs
@@ -84,7 +84,7 @@ mod circle {
 
 use circle::Circle;
 use iced::{
-    slider, Column, Container, CrossAlign, Element, Length, Sandbox, Settings,
+    slider, Alignment, Column, Container, Element, Length, Sandbox, Settings,
     Slider, Text,
 };
 
@@ -129,7 +129,7 @@ impl Sandbox for Example {
             .padding(20)
             .spacing(20)
             .max_width(500)
-            .align_items(CrossAlign::Center)
+            .align_items(Alignment::Center)
             .push(Circle::new(self.radius))
             .push(Text::new(format!("Radius: {:.2}", self.radius)))
             .push(
diff --git a/examples/download_progress/src/main.rs b/examples/download_progress/src/main.rs
index a6dd54ba..21804a0a 100644
--- a/examples/download_progress/src/main.rs
+++ b/examples/download_progress/src/main.rs
@@ -1,6 +1,6 @@
 use iced::{
-    button, executor, Application, Button, Column, Command, Container,
-    CrossAlign, Element, Length, ProgressBar, Settings, Subscription, Text,
+    button, executor, Alignment, Application, Button, Column, Command,
+    Container, Element, Length, ProgressBar, Settings, Subscription, Text,
 };
 
 mod download;
@@ -83,7 +83,7 @@ impl Application for Example {
                     .on_press(Message::Add)
                     .padding(10),
             )
-            .align_items(CrossAlign::End);
+            .align_items(Alignment::End);
 
         Container::new(downloads)
             .width(Length::Fill)
@@ -182,7 +182,7 @@ impl Download {
             }
             State::Finished { button } => Column::new()
                 .spacing(10)
-                .align_items(CrossAlign::Center)
+                .align_items(Alignment::Center)
                 .push(Text::new("Download finished!"))
                 .push(
                     Button::new(button, Text::new("Start again"))
@@ -195,7 +195,7 @@ impl Download {
             }
             State::Errored { button } => Column::new()
                 .spacing(10)
-                .align_items(CrossAlign::Center)
+                .align_items(Alignment::Center)
                 .push(Text::new("Something went wrong :("))
                 .push(
                     Button::new(button, Text::new("Try again"))
@@ -207,7 +207,7 @@ impl Download {
         Column::new()
             .spacing(10)
             .padding(10)
-            .align_items(CrossAlign::Center)
+            .align_items(Alignment::Center)
             .push(progress_bar)
             .push(control)
             .into()
diff --git a/examples/events/src/main.rs b/examples/events/src/main.rs
index 398b321f..7f024c56 100644
--- a/examples/events/src/main.rs
+++ b/examples/events/src/main.rs
@@ -1,7 +1,6 @@
 use iced::{
-    button, executor, Application, Button, Checkbox, Column, Command,
-    Container, CrossAlign, Element, HorizontalAlignment, Length, Settings,
-    Subscription, Text,
+    alignment, button, executor, Alignment, Application, Button, Checkbox,
+    Column, Command, Container, Element, Length, Settings, Subscription, Text,
 };
 use iced_native::{window, Event};
 
@@ -91,14 +90,14 @@ impl Application for Events {
             &mut self.exit,
             Text::new("Exit")
                 .width(Length::Fill)
-                .horizontal_alignment(HorizontalAlignment::Center),
+                .horizontal_alignment(alignment::Horizontal::Center),
         )
         .width(Length::Units(100))
         .padding(10)
         .on_press(Message::Exit);
 
         let content = Column::new()
-            .align_items(CrossAlign::Center)
+            .align_items(Alignment::Center)
             .spacing(20)
             .push(events)
             .push(toggle)
diff --git a/examples/game_of_life/src/main.rs b/examples/game_of_life/src/main.rs
index 38f4fcbd..50112618 100644
--- a/examples/game_of_life/src/main.rs
+++ b/examples/game_of_life/src/main.rs
@@ -11,7 +11,7 @@ use iced::slider::{self, Slider};
 use iced::time;
 use iced::window;
 use iced::{
-    Application, Checkbox, Column, Command, Container, CrossAlign, Element,
+    Alignment, Application, Checkbox, Column, Command, Container, Element,
     Length, Row, Settings, Subscription, Text,
 };
 use preset::Preset;
@@ -158,10 +158,10 @@ impl Application for GameOfLife {
 mod grid {
     use crate::Preset;
     use iced::{
+        alignment,
         canvas::event::{self, Event},
         canvas::{self, Cache, Canvas, Cursor, Frame, Geometry, Path, Text},
-        mouse, Color, Element, HorizontalAlignment, Length, Point, Rectangle,
-        Size, Vector, VerticalAlignment,
+        mouse, Color, Element, Length, Point, Rectangle, Size, Vector,
     };
     use rustc_hash::{FxHashMap, FxHashSet};
     use std::future::Future;
@@ -498,8 +498,8 @@ mod grid {
                     color: Color::WHITE,
                     size: 14.0,
                     position: Point::new(frame.width(), frame.height()),
-                    horizontal_alignment: HorizontalAlignment::Right,
-                    vertical_alignment: VerticalAlignment::Bottom,
+                    horizontal_alignment: alignment::Horizontal::Right,
+                    vertical_alignment: alignment::Vertical::Bottom,
                     ..Text::default()
                 };
 
@@ -844,7 +844,7 @@ impl Controls {
 
         let speed_controls = Row::new()
             .width(Length::Fill)
-            .align_items(CrossAlign::Center)
+            .align_items(Alignment::Center)
             .spacing(10)
             .push(
                 Slider::new(
@@ -860,7 +860,7 @@ impl Controls {
         Row::new()
             .padding(10)
             .spacing(20)
-            .align_items(CrossAlign::Center)
+            .align_items(Alignment::Center)
             .push(playback_controls)
             .push(speed_controls)
             .push(
diff --git a/examples/geometry/src/main.rs b/examples/geometry/src/main.rs
index 733efca7..e5115493 100644
--- a/examples/geometry/src/main.rs
+++ b/examples/geometry/src/main.rs
@@ -161,7 +161,7 @@ mod rainbow {
 }
 
 use iced::{
-    scrollable, Column, Container, CrossAlign, Element, Length, Sandbox,
+    scrollable, Alignment, Column, Container, Element, Length, Sandbox,
     Scrollable, Settings, Text,
 };
 use rainbow::Rainbow;
@@ -194,7 +194,7 @@ impl Sandbox for Example {
             .padding(20)
             .spacing(20)
             .max_width(500)
-            .align_items(CrossAlign::Start)
+            .align_items(Alignment::Start)
             .push(Rainbow::new())
             .push(Text::new(
                 "In this example we draw a custom widget Rainbow, using \
diff --git a/examples/integration_opengl/src/controls.rs b/examples/integration_opengl/src/controls.rs
index ebf64d43..fa5aa91d 100644
--- a/examples/integration_opengl/src/controls.rs
+++ b/examples/integration_opengl/src/controls.rs
@@ -1,7 +1,8 @@
 use iced_glow::Renderer;
+use iced_glutin::slider;
 use iced_glutin::{
-    slider, Color, Column, Command, CrossAlign, Element, Length, Program, Row,
-    Slider, Text,
+    Alignment, Color, Column, Command, Element, Length, Program, Row, Slider,
+    Text,
 };
 
 pub struct Controls {
@@ -79,11 +80,11 @@ impl Program for Controls {
         Row::new()
             .width(Length::Fill)
             .height(Length::Fill)
-            .align_items(CrossAlign::End)
+            .align_items(Alignment::End)
             .push(
                 Column::new()
                     .width(Length::Fill)
-                    .align_items(CrossAlign::End)
+                    .align_items(Alignment::End)
                     .push(
                         Column::new()
                             .padding(10)
diff --git a/examples/integration_wgpu/src/controls.rs b/examples/integration_wgpu/src/controls.rs
index e7654038..414eb9ce 100644
--- a/examples/integration_wgpu/src/controls.rs
+++ b/examples/integration_wgpu/src/controls.rs
@@ -1,6 +1,6 @@
 use iced_wgpu::Renderer;
 use iced_winit::{
-    slider, Color, Column, Command, CrossAlign, Element, Length, Program, Row,
+    slider, Alignment, Color, Column, Command, Element, Length, Program, Row,
     Slider, Text,
 };
 
@@ -79,11 +79,11 @@ impl Program for Controls {
         Row::new()
             .width(Length::Fill)
             .height(Length::Fill)
-            .align_items(CrossAlign::End)
+            .align_items(Alignment::End)
             .push(
                 Column::new()
                     .width(Length::Fill)
-                    .align_items(CrossAlign::End)
+                    .align_items(Alignment::End)
                     .push(
                         Column::new()
                             .padding(10)
diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs
index 737c9126..69872bad 100644
--- a/examples/pane_grid/src/main.rs
+++ b/examples/pane_grid/src/main.rs
@@ -1,8 +1,7 @@
 use iced::{
-    button, executor, keyboard, pane_grid, scrollable, Application, Button,
-    Color, Column, Command, Container, CrossAlign, Element,
-    HorizontalAlignment, Length, PaneGrid, Row, Scrollable, Settings,
-    Subscription, Text,
+    alignment, button, executor, keyboard, pane_grid, scrollable, Alignment,
+    Application, Button, Color, Column, Command, Container, Element, Length,
+    PaneGrid, Row, Scrollable, Settings, Subscription, Text,
 };
 use iced_native::{event, subscription, Event};
 
@@ -293,7 +292,7 @@ impl Content {
                 state,
                 Text::new(label)
                     .width(Length::Fill)
-                    .horizontal_alignment(HorizontalAlignment::Center)
+                    .horizontal_alignment(alignment::Horizontal::Center)
                     .size(16),
             )
             .width(Length::Fill)
@@ -330,7 +329,7 @@ impl Content {
         let content = Scrollable::new(scroll)
             .width(Length::Fill)
             .spacing(10)
-            .align_items(CrossAlign::Center)
+            .align_items(Alignment::Center)
             .push(controls);
 
         Container::new(content)
diff --git a/examples/pick_list/src/main.rs b/examples/pick_list/src/main.rs
index 363d3222..52303d70 100644
--- a/examples/pick_list/src/main.rs
+++ b/examples/pick_list/src/main.rs
@@ -1,5 +1,5 @@
 use iced::{
-    pick_list, scrollable, Container, CrossAlign, Element, Length, PickList,
+    pick_list, scrollable, Alignment, Container, Element, Length, PickList,
     Sandbox, Scrollable, Settings, Space, Text,
 };
 
@@ -49,7 +49,7 @@ impl Sandbox for Example {
 
         let mut content = Scrollable::new(&mut self.scroll)
             .width(Length::Fill)
-            .align_items(CrossAlign::Center)
+            .align_items(Alignment::Center)
             .spacing(10)
             .push(Space::with_height(Length::Units(600)))
             .push(Text::new("Which is your favorite language?"))
diff --git a/examples/pokedex/src/main.rs b/examples/pokedex/src/main.rs
index aa57aae3..c99240a1 100644
--- a/examples/pokedex/src/main.rs
+++ b/examples/pokedex/src/main.rs
@@ -1,6 +1,6 @@
 use iced::{
-    button, futures, image, Application, Button, Column, Command, Container,
-    CrossAlign, Element, Length, Row, Settings, Text,
+    button, futures, image, Alignment, Application, Button, Column, Command,
+    Container, Element, Length, Row, Settings, Text,
 };
 
 pub fn main() -> iced::Result {
@@ -85,14 +85,14 @@ impl Application for Pokedex {
             Pokedex::Loaded { pokemon, search } => Column::new()
                 .max_width(500)
                 .spacing(20)
-                .align_items(CrossAlign::End)
+                .align_items(Alignment::End)
                 .push(pokemon.view())
                 .push(
                     button(search, "Keep searching!").on_press(Message::Search),
                 ),
             Pokedex::Errored { try_again, .. } => Column::new()
                 .spacing(20)
-                .align_items(CrossAlign::End)
+                .align_items(Alignment::End)
                 .push(Text::new("Whoops! Something went wrong...").size(40))
                 .push(button(try_again, "Try again").on_press(Message::Search)),
         };
@@ -121,7 +121,7 @@ impl Pokemon {
     fn view(&mut self) -> Element<Message> {
         Row::new()
             .spacing(20)
-            .align_items(CrossAlign::Center)
+            .align_items(Alignment::Center)
             .push(image::Viewer::new(
                 &mut self.image_viewer,
                 self.image.clone(),
@@ -131,7 +131,7 @@ impl Pokemon {
                     .spacing(20)
                     .push(
                         Row::new()
-                            .align_items(CrossAlign::Center)
+                            .align_items(Alignment::Center)
                             .spacing(20)
                             .push(
                                 Text::new(&self.name)
diff --git a/examples/qr_code/src/main.rs b/examples/qr_code/src/main.rs
index 73c2e058..92c82d45 100644
--- a/examples/qr_code/src/main.rs
+++ b/examples/qr_code/src/main.rs
@@ -1,7 +1,7 @@
 use iced::qr_code::{self, QRCode};
 use iced::text_input::{self, TextInput};
 use iced::{
-    Column, Container, CrossAlign, Element, Length, Sandbox, Settings, Text,
+    Alignment, Column, Container, Element, Length, Sandbox, Settings, Text,
 };
 
 pub fn main() -> iced::Result {
@@ -62,7 +62,7 @@ impl Sandbox for QRGenerator {
         let mut content = Column::new()
             .width(Length::Units(700))
             .spacing(20)
-            .align_items(CrossAlign::Center)
+            .align_items(Alignment::Center)
             .push(title)
             .push(input);
 
diff --git a/examples/stopwatch/src/main.rs b/examples/stopwatch/src/main.rs
index 41b3eb37..dc8a4de7 100644
--- a/examples/stopwatch/src/main.rs
+++ b/examples/stopwatch/src/main.rs
@@ -1,7 +1,6 @@
 use iced::{
-    button, executor, time, Application, Button, Column, Command, Container,
-    CrossAlign, Element, HorizontalAlignment, Length, Row, Settings,
-    Subscription, Text,
+    alignment, button, executor, time, Alignment, Application, Button, Column,
+    Command, Container, Element, Length, Row, Settings, Subscription, Text,
 };
 use std::time::{Duration, Instant};
 
@@ -104,7 +103,7 @@ impl Application for Stopwatch {
             Button::new(
                 state,
                 Text::new(label)
-                    .horizontal_alignment(HorizontalAlignment::Center),
+                    .horizontal_alignment(alignment::Horizontal::Center),
             )
             .min_width(80)
             .padding(10)
@@ -130,7 +129,7 @@ impl Application for Stopwatch {
             .push(reset_button);
 
         let content = Column::new()
-            .align_items(CrossAlign::Center)
+            .align_items(Alignment::Center)
             .spacing(20)
             .push(duration)
             .push(controls);
diff --git a/examples/styling/src/main.rs b/examples/styling/src/main.rs
index 4a004f3f..81d33ad3 100644
--- a/examples/styling/src/main.rs
+++ b/examples/styling/src/main.rs
@@ -1,7 +1,7 @@
 use iced::{
-    button, scrollable, slider, text_input, Button, Checkbox, Column,
-    Container, CrossAlign, Element, Length, ProgressBar, Radio, Row, Rule,
-    Sandbox, Scrollable, Settings, Slider, Space, Text, TextInput, Toggler,
+    button, scrollable, slider, text_input, Alignment, Button, Checkbox,
+    Column, Container, Element, Length, ProgressBar, Radio, Row, Rule, Sandbox,
+    Scrollable, Settings, Slider, Space, Text, TextInput, Toggler,
 };
 
 pub fn main() -> iced::Result {
@@ -132,7 +132,7 @@ impl Sandbox for Styling {
                 Row::new()
                     .spacing(10)
                     .height(Length::Units(100))
-                    .align_items(CrossAlign::Center)
+                    .align_items(Alignment::Center)
                     .push(scrollable)
                     .push(Rule::vertical(38).style(self.theme))
                     .push(
diff --git a/examples/todos/src/main.rs b/examples/todos/src/main.rs
index 6e798f32..11f23fd4 100644
--- a/examples/todos/src/main.rs
+++ b/examples/todos/src/main.rs
@@ -1,7 +1,10 @@
+use iced::alignment::{self, Alignment};
+use iced::button::{self, Button};
+use iced::scrollable::{self, Scrollable};
+use iced::text_input::{self, TextInput};
 use iced::{
-    button, scrollable, text_input, Application, Button, Checkbox, Column,
-    Command, Container, CrossAlign, Element, Font, HorizontalAlignment, Length,
-    Row, Scrollable, Settings, Text, TextInput,
+    Application, Checkbox, Column, Command, Container, Element, Font, Length,
+    Row, Settings, Text,
 };
 use serde::{Deserialize, Serialize};
 
@@ -151,7 +154,7 @@ impl Application for Todos {
                     .width(Length::Fill)
                     .size(100)
                     .color([0.5, 0.5, 0.5])
-                    .horizontal_alignment(HorizontalAlignment::Center);
+                    .horizontal_alignment(alignment::Horizontal::Center);
 
                 let input = TextInput::new(
                     input,
@@ -295,7 +298,7 @@ impl Task {
 
                 Row::new()
                     .spacing(20)
-                    .align_items(CrossAlign::Center)
+                    .align_items(Alignment::Center)
                     .push(checkbox)
                     .push(
                         Button::new(edit_button, edit_icon())
@@ -320,7 +323,7 @@ impl Task {
 
                 Row::new()
                     .spacing(20)
-                    .align_items(CrossAlign::Center)
+                    .align_items(Alignment::Center)
                     .push(text_input)
                     .push(
                         Button::new(
@@ -369,7 +372,7 @@ impl Controls {
 
         Row::new()
             .spacing(20)
-            .align_items(CrossAlign::Center)
+            .align_items(Alignment::Center)
             .push(
                 Text::new(&format!(
                     "{} {} left",
@@ -431,7 +434,7 @@ impl Filter {
 fn loading_message<'a>() -> Element<'a, Message> {
     Container::new(
         Text::new("Loading...")
-            .horizontal_alignment(HorizontalAlignment::Center)
+            .horizontal_alignment(alignment::Horizontal::Center)
             .size(50),
     )
     .width(Length::Fill)
@@ -445,7 +448,7 @@ fn empty_message<'a>(message: &str) -> Element<'a, Message> {
         Text::new(message)
             .width(Length::Fill)
             .size(25)
-            .horizontal_alignment(HorizontalAlignment::Center)
+            .horizontal_alignment(alignment::Horizontal::Center)
             .color([0.7, 0.7, 0.7]),
     )
     .width(Length::Fill)
@@ -464,7 +467,7 @@ fn icon(unicode: char) -> Text {
     Text::new(&unicode.to_string())
         .font(ICONS)
         .width(Length::Units(20))
-        .horizontal_alignment(HorizontalAlignment::Center)
+        .horizontal_alignment(alignment::Horizontal::Center)
         .size(20)
 }
 
diff --git a/examples/tooltip/src/main.rs b/examples/tooltip/src/main.rs
index f6b5dc0e..cfeaf6a6 100644
--- a/examples/tooltip/src/main.rs
+++ b/examples/tooltip/src/main.rs
@@ -1,8 +1,7 @@
 use iced::tooltip::{self, Tooltip};
 use iced::{
-    button, Button, Column, Container, CrossAlign, Element,
-    HorizontalAlignment, Length, Row, Sandbox, Settings, Text,
-    VerticalAlignment,
+    alignment, button, Alignment, Button, Column, Container, Element, Length,
+    Row, Sandbox, Settings, Text,
 };
 
 pub fn main() {
@@ -61,7 +60,7 @@ impl Sandbox for Example {
         ])
         .width(Length::Fill)
         .height(Length::Fill)
-        .align_items(CrossAlign::Center)
+        .align_items(Alignment::Center)
         .spacing(50);
 
         let follow_cursor = tooltip(
@@ -105,8 +104,8 @@ fn tooltip<'a>(
                 .size(40)
                 .width(Length::Fill)
                 .height(Length::Fill)
-                .horizontal_alignment(HorizontalAlignment::Center)
-                .vertical_alignment(VerticalAlignment::Center),
+                .horizontal_alignment(alignment::Horizontal::Center)
+                .vertical_alignment(alignment::Vertical::Center),
         )
         .on_press(Message)
         .width(Length::Fill)
diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs
index 1215f83d..b5af48c7 100644
--- a/examples/tour/src/main.rs
+++ b/examples/tour/src/main.rs
@@ -1,7 +1,7 @@
 use iced::{
-    button, scrollable, slider, text_input, Button, Checkbox, Color, Column,
-    Container, Element, HorizontalAlignment, Image, Length, Radio, Row,
-    Sandbox, Scrollable, Settings, Slider, Space, Text, TextInput, Toggler,
+    alignment, button, scrollable, slider, text_input, Button, Checkbox, Color,
+    Column, Container, Element, Image, Length, Radio, Row, Sandbox, Scrollable,
+    Settings, Slider, Space, Text, TextInput, Toggler,
 };
 
 pub fn main() -> iced::Result {
@@ -419,7 +419,7 @@ impl<'a> Step {
             .push(
                 Text::new(&value.to_string())
                     .width(Length::Fill)
-                    .horizontal_alignment(HorizontalAlignment::Center),
+                    .horizontal_alignment(alignment::Horizontal::Center),
             )
     }
 
@@ -466,7 +466,7 @@ impl<'a> Step {
             .push(
                 Text::new(&format!("{} px", spacing))
                     .width(Length::Fill)
-                    .horizontal_alignment(HorizontalAlignment::Center),
+                    .horizontal_alignment(alignment::Horizontal::Center),
             );
 
         Self::container("Rows and columns")
@@ -591,7 +591,7 @@ impl<'a> Step {
             .push(
                 Text::new(&format!("Width: {} px", width.to_string()))
                     .width(Length::Fill)
-                    .horizontal_alignment(HorizontalAlignment::Center),
+                    .horizontal_alignment(alignment::Horizontal::Center),
             )
     }
 
@@ -612,7 +612,7 @@ impl<'a> Step {
                 Text::new("You are halfway there!")
                     .width(Length::Fill)
                     .size(30)
-                    .horizontal_alignment(HorizontalAlignment::Center),
+                    .horizontal_alignment(alignment::Horizontal::Center),
             )
             .push(Column::new().height(Length::Units(4096)))
             .push(ferris(300))
@@ -620,7 +620,7 @@ impl<'a> Step {
                 Text::new("You made it!")
                     .width(Length::Fill)
                     .size(50)
-                    .horizontal_alignment(HorizontalAlignment::Center),
+                    .horizontal_alignment(alignment::Horizontal::Center),
             )
     }
 
@@ -662,7 +662,7 @@ impl<'a> Step {
                     value
                 })
                 .width(Length::Fill)
-                .horizontal_alignment(HorizontalAlignment::Center),
+                .horizontal_alignment(alignment::Horizontal::Center),
             )
     }
 
@@ -680,7 +680,7 @@ impl<'a> Step {
                 Element::new(
                     Text::new("Not available on web yet!")
                         .color([0.7, 0.7, 0.7])
-                        .horizontal_alignment(HorizontalAlignment::Center),
+                        .horizontal_alignment(alignment::Horizontal::Center),
                 )
             } else {
                 Element::new(Checkbox::new(
@@ -725,7 +725,7 @@ fn button<'a, Message: Clone>(
 ) -> Button<'a, Message> {
     Button::new(
         state,
-        Text::new(label).horizontal_alignment(HorizontalAlignment::Center),
+        Text::new(label).horizontal_alignment(alignment::Horizontal::Center),
     )
     .padding(12)
     .min_width(100)
diff --git a/glow/src/backend.rs b/glow/src/backend.rs
index 526965cb..9a9457cf 100644
--- a/glow/src/backend.rs
+++ b/glow/src/backend.rs
@@ -7,8 +7,9 @@ use iced_graphics::backend;
 use iced_graphics::font;
 use iced_graphics::Layer;
 use iced_graphics::Primitive;
+use iced_native::alignment;
 use iced_native::mouse;
-use iced_native::{Font, HorizontalAlignment, Size, VerticalAlignment};
+use iced_native::{Font, Size};
 
 /// A [`glow`] graphics backend for [`iced`].
 ///
@@ -147,24 +148,24 @@ impl Backend {
                     }],
                     layout: glow_glyph::Layout::default()
                         .h_align(match text.horizontal_alignment {
-                            HorizontalAlignment::Left => {
+                            alignment::Horizontal::Left => {
                                 glow_glyph::HorizontalAlign::Left
                             }
-                            HorizontalAlignment::Center => {
+                            alignment::Horizontal::Center => {
                                 glow_glyph::HorizontalAlign::Center
                             }
-                            HorizontalAlignment::Right => {
+                            alignment::Horizontal::Right => {
                                 glow_glyph::HorizontalAlign::Right
                             }
                         })
                         .v_align(match text.vertical_alignment {
-                            VerticalAlignment::Top => {
+                            alignment::Vertical::Top => {
                                 glow_glyph::VerticalAlign::Top
                             }
-                            VerticalAlignment::Center => {
+                            alignment::Vertical::Center => {
                                 glow_glyph::VerticalAlign::Center
                             }
-                            VerticalAlignment::Bottom => {
+                            alignment::Vertical::Bottom => {
                                 glow_glyph::VerticalAlign::Bottom
                             }
                         }),
diff --git a/glow/src/lib.rs b/glow/src/lib.rs
index 888492d8..418f7e3d 100644
--- a/glow/src/lib.rs
+++ b/glow/src/lib.rs
@@ -29,10 +29,9 @@ pub(crate) use iced_graphics::Transformation;
 pub use widget::*;
 
 pub use iced_graphics::{Error, Viewport};
-pub use iced_native::{
-    Background, Color, Command, HorizontalAlignment, Length, Vector,
-    VerticalAlignment,
-};
+
+pub use iced_native::alignment;
+pub use iced_native::{Alignment, Background, Color, Command, Length, Vector};
 
 /// A [`glow`] graphics renderer for [`iced`].
 ///
diff --git a/graphics/src/layer.rs b/graphics/src/layer.rs
index 7dce1d4c..9653a2e4 100644
--- a/graphics/src/layer.rs
+++ b/graphics/src/layer.rs
@@ -1,10 +1,10 @@
 //! Organize rendering primitives into a flattened list of layers.
+use crate::alignment;
 use crate::image;
 use crate::svg;
 use crate::triangle;
 use crate::{
-    Background, Font, HorizontalAlignment, Point, Primitive, Rectangle, Size,
-    Vector, VerticalAlignment, Viewport,
+    Background, Font, Point, Primitive, Rectangle, Size, Vector, Viewport,
 };
 
 /// A group of primitives that should be clipped together.
@@ -55,8 +55,8 @@ impl<'a> Layer<'a> {
                 color: [0.9, 0.9, 0.9, 1.0],
                 size: 20.0,
                 font: Font::Default,
-                horizontal_alignment: HorizontalAlignment::Left,
-                vertical_alignment: VerticalAlignment::Top,
+                horizontal_alignment: alignment::Horizontal::Left,
+                vertical_alignment: alignment::Vertical::Top,
             };
 
             overlay.text.push(text);
@@ -293,10 +293,10 @@ pub struct Text<'a> {
     pub font: Font,
 
     /// The horizontal alignment of the [`Text`].
-    pub horizontal_alignment: HorizontalAlignment,
+    pub horizontal_alignment: alignment::Horizontal,
 
     /// The vertical alignment of the [`Text`].
-    pub vertical_alignment: VerticalAlignment,
+    pub vertical_alignment: alignment::Vertical,
 }
 
 /// A raster or vector image.
diff --git a/graphics/src/lib.rs b/graphics/src/lib.rs
index 14388653..54cdcb77 100644
--- a/graphics/src/lib.rs
+++ b/graphics/src/lib.rs
@@ -39,7 +39,7 @@ pub use renderer::Renderer;
 pub use transformation::Transformation;
 pub use viewport::Viewport;
 
+pub use iced_native::alignment;
 pub use iced_native::{
-    Background, Color, Font, HorizontalAlignment, Point, Rectangle, Size,
-    Vector, VerticalAlignment,
+    Alignment, Background, Color, Font, Point, Rectangle, Size, Vector,
 };
diff --git a/graphics/src/overlay/menu.rs b/graphics/src/overlay/menu.rs
index 9e91a0ef..53f47984 100644
--- a/graphics/src/overlay/menu.rs
+++ b/graphics/src/overlay/menu.rs
@@ -1,10 +1,9 @@
 //! Build and show dropdown menus.
+use crate::alignment;
 use crate::backend::{self, Backend};
 use crate::{Primitive, Renderer};
-use iced_native::{
-    mouse, overlay, Color, Font, HorizontalAlignment, Padding, Point,
-    Rectangle, VerticalAlignment,
-};
+
+use iced_native::{mouse, overlay, Color, Font, Padding, Point, Rectangle};
 
 pub use iced_style::menu::Style;
 
@@ -100,8 +99,8 @@ where
                 } else {
                     style.text_color
                 },
-                horizontal_alignment: HorizontalAlignment::Left,
-                vertical_alignment: VerticalAlignment::Center,
+                horizontal_alignment: alignment::Horizontal::Left,
+                vertical_alignment: alignment::Vertical::Center,
             });
         }
 
diff --git a/graphics/src/primitive.rs b/graphics/src/primitive.rs
index 30263bd4..32f8383d 100644
--- a/graphics/src/primitive.rs
+++ b/graphics/src/primitive.rs
@@ -1,9 +1,10 @@
 use iced_native::{
-    image, svg, Background, Color, Font, HorizontalAlignment, Rectangle, Size,
-    Vector, VerticalAlignment,
+    image, svg, Background, Color, Font, Rectangle, Size, Vector,
 };
 
+use crate::alignment;
 use crate::triangle;
+
 use std::sync::Arc;
 
 /// A rendering primitive.
@@ -29,9 +30,9 @@ pub enum Primitive {
         /// The font of the text
         font: Font,
         /// The horizontal alignment of the text
-        horizontal_alignment: HorizontalAlignment,
+        horizontal_alignment: alignment::Horizontal,
         /// The vertical alignment of the text
-        vertical_alignment: VerticalAlignment,
+        vertical_alignment: alignment::Vertical,
     },
     /// A quad primitive
     Quad {
diff --git a/graphics/src/widget/canvas/text.rs b/graphics/src/widget/canvas/text.rs
index c4cae30e..ab070a70 100644
--- a/graphics/src/widget/canvas/text.rs
+++ b/graphics/src/widget/canvas/text.rs
@@ -1,4 +1,5 @@
-use iced_native::{Color, Font, HorizontalAlignment, Point, VerticalAlignment};
+use crate::alignment;
+use crate::{Color, Font, Point};
 
 /// A bunch of text that can be drawn to a canvas
 #[derive(Debug, Clone)]
@@ -14,9 +15,9 @@ pub struct Text {
     /// The font of the text
     pub font: Font,
     /// The horizontal alignment of the text
-    pub horizontal_alignment: HorizontalAlignment,
+    pub horizontal_alignment: alignment::Horizontal,
     /// The vertical alignment of the text
-    pub vertical_alignment: VerticalAlignment,
+    pub vertical_alignment: alignment::Vertical,
 }
 
 impl Default for Text {
@@ -27,8 +28,8 @@ impl Default for Text {
             color: Color::BLACK,
             size: 16.0,
             font: Font::Default,
-            horizontal_alignment: HorizontalAlignment::Left,
-            vertical_alignment: VerticalAlignment::Top,
+            horizontal_alignment: alignment::Horizontal::Left,
+            vertical_alignment: alignment::Vertical::Top,
         }
     }
 }
diff --git a/graphics/src/widget/checkbox.rs b/graphics/src/widget/checkbox.rs
index cb7fd2cf..620bfc9e 100644
--- a/graphics/src/widget/checkbox.rs
+++ b/graphics/src/widget/checkbox.rs
@@ -1,9 +1,10 @@
 //! Show toggle controls using checkboxes.
+use crate::alignment;
 use crate::backend::{self, Backend};
-use crate::{Primitive, Renderer};
+use crate::{Primitive, Rectangle, Renderer};
+
 use iced_native::checkbox;
 use iced_native::mouse;
-use iced_native::{HorizontalAlignment, Rectangle, VerticalAlignment};
 
 pub use iced_style::checkbox::{Style, StyleSheet};
 
@@ -57,8 +58,8 @@ where
                             ..bounds
                         },
                         color: style.checkmark_color,
-                        horizontal_alignment: HorizontalAlignment::Center,
-                        vertical_alignment: VerticalAlignment::Center,
+                        horizontal_alignment: alignment::Horizontal::Center,
+                        vertical_alignment: alignment::Vertical::Center,
                     };
 
                     vec![checkbox, check, label]
diff --git a/graphics/src/widget/pick_list.rs b/graphics/src/widget/pick_list.rs
index 88a590b5..532840b8 100644
--- a/graphics/src/widget/pick_list.rs
+++ b/graphics/src/widget/pick_list.rs
@@ -1,10 +1,9 @@
 //! Display a dropdown list of selectable values.
+use crate::alignment;
 use crate::backend::{self, Backend};
 use crate::{Primitive, Renderer};
-use iced_native::{
-    mouse, Font, HorizontalAlignment, Padding, Point, Rectangle,
-    VerticalAlignment,
-};
+
+use iced_native::{mouse, Font, Padding, Point, Rectangle};
 use iced_style::menu;
 
 pub use iced_native::pick_list::State;
@@ -64,8 +63,8 @@ where
                 ..bounds
             },
             color: style.text_color,
-            horizontal_alignment: HorizontalAlignment::Right,
-            vertical_alignment: VerticalAlignment::Center,
+            horizontal_alignment: alignment::Horizontal::Right,
+            vertical_alignment: alignment::Vertical::Center,
         };
 
         (
@@ -85,8 +84,8 @@ where
                             y: bounds.center_y(),
                             ..bounds
                         },
-                        horizontal_alignment: HorizontalAlignment::Left,
-                        vertical_alignment: VerticalAlignment::Center,
+                        horizontal_alignment: alignment::Horizontal::Left,
+                        vertical_alignment: alignment::Vertical::Center,
                     };
 
                     vec![background, label, arrow_down]
diff --git a/graphics/src/widget/text.rs b/graphics/src/widget/text.rs
index 645c8414..d6d446d3 100644
--- a/graphics/src/widget/text.rs
+++ b/graphics/src/widget/text.rs
@@ -1,11 +1,10 @@
 //! Write some text for your users to read.
 use crate::backend::{self, Backend};
 use crate::{Primitive, Renderer};
+use iced_native::alignment;
 use iced_native::mouse;
 use iced_native::text;
-use iced_native::{
-    Color, Font, HorizontalAlignment, Point, Rectangle, Size, VerticalAlignment,
-};
+use iced_native::{Color, Font, Point, Rectangle, Size};
 
 /// A paragraph of text.
 ///
@@ -62,19 +61,19 @@ where
         size: u16,
         font: Font,
         color: Option<Color>,
-        horizontal_alignment: HorizontalAlignment,
-        vertical_alignment: VerticalAlignment,
+        horizontal_alignment: alignment::Horizontal,
+        vertical_alignment: alignment::Vertical,
     ) -> Self::Output {
         let x = match horizontal_alignment {
-            iced_native::HorizontalAlignment::Left => bounds.x,
-            iced_native::HorizontalAlignment::Center => bounds.center_x(),
-            iced_native::HorizontalAlignment::Right => bounds.x + bounds.width,
+            alignment::Horizontal::Left => bounds.x,
+            alignment::Horizontal::Center => bounds.center_x(),
+            alignment::Horizontal::Right => bounds.x + bounds.width,
         };
 
         let y = match vertical_alignment {
-            iced_native::VerticalAlignment::Top => bounds.y,
-            iced_native::VerticalAlignment::Center => bounds.center_y(),
-            iced_native::VerticalAlignment::Bottom => bounds.y + bounds.height,
+            alignment::Vertical::Top => bounds.y,
+            alignment::Vertical::Center => bounds.center_y(),
+            alignment::Vertical::Bottom => bounds.y + bounds.height,
         };
 
         (
diff --git a/graphics/src/widget/text_input.rs b/graphics/src/widget/text_input.rs
index c269022b..1516b007 100644
--- a/graphics/src/widget/text_input.rs
+++ b/graphics/src/widget/text_input.rs
@@ -1,14 +1,15 @@
 //! Display fields that can be filled with text.
 //!
 //! A [`TextInput`] has some local [`State`].
+use crate::alignment;
 use crate::backend::{self, Backend};
-use crate::{Primitive, Renderer};
+use crate::{
+    Background, Color, Font, Point, Primitive, Rectangle, Renderer, Size,
+    Vector,
+};
+
 use iced_native::mouse;
 use iced_native::text_input::{self, cursor};
-use iced_native::{
-    Background, Color, Font, HorizontalAlignment, Point, Rectangle, Size,
-    Vector, VerticalAlignment,
-};
 use std::f32;
 
 pub use iced_native::text_input::State;
@@ -116,8 +117,8 @@ where
                 ..text_bounds
             },
             size: f32::from(size),
-            horizontal_alignment: HorizontalAlignment::Left,
-            vertical_alignment: VerticalAlignment::Center,
+            horizontal_alignment: alignment::Horizontal::Left,
+            vertical_alignment: alignment::Vertical::Center,
         };
 
         let (contents_primitive, offset) = if state.is_focused() {
diff --git a/native/src/layout/flex.rs b/native/src/layout/flex.rs
index dfb5288b..5fbcbca0 100644
--- a/native/src/layout/flex.rs
+++ b/native/src/layout/flex.rs
@@ -16,11 +16,8 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-
-use crate::{
-    layout::{Limits, Node},
-    CrossAlign, Element, Padding, Point, Size,
-};
+use crate::layout::{Limits, Node};
+use crate::{Alignment, Element, Padding, Point, Size};
 
 /// The main axis of a flex layout.
 #[derive(Debug)]
@@ -65,7 +62,7 @@ pub fn resolve<Message, Renderer>(
     limits: &Limits,
     padding: Padding,
     spacing: f32,
-    align_items: CrossAlign,
+    align_items: Alignment,
     items: &[Element<'_, Message, Renderer>],
 ) -> Node
 where
@@ -82,7 +79,7 @@ where
     let mut nodes: Vec<Node> = Vec::with_capacity(items.len());
     nodes.resize(items.len(), Node::default());
 
-    if align_items == CrossAlign::Fill {
+    if align_items == Alignment::Fill {
         let mut fill_cross = axis.cross(limits.min());
 
         items.iter().for_each(|child| {
@@ -116,13 +113,13 @@ where
         .fill_factor();
 
         if fill_factor == 0 {
-            let (min_width, min_height) = if align_items == CrossAlign::Fill {
+            let (min_width, min_height) = if align_items == Alignment::Fill {
                 axis.pack(0.0, cross)
             } else {
                 axis.pack(0.0, 0.0)
             };
 
-            let (max_width, max_height) = if align_items == CrossAlign::Fill {
+            let (max_width, max_height) = if align_items == Alignment::Fill {
                 axis.pack(available, cross)
             } else {
                 axis.pack(available, max_cross)
@@ -138,7 +135,7 @@ where
 
             available -= axis.main(size);
 
-            if align_items != CrossAlign::Fill {
+            if align_items != Alignment::Fill {
                 cross = cross.max(axis.cross(size));
             }
 
@@ -165,13 +162,13 @@ where
                 max_main
             };
 
-            let (min_width, min_height) = if align_items == CrossAlign::Fill {
+            let (min_width, min_height) = if align_items == Alignment::Fill {
                 axis.pack(min_main, cross)
             } else {
                 axis.pack(min_main, axis.cross(limits.min()))
             };
 
-            let (max_width, max_height) = if align_items == CrossAlign::Fill {
+            let (max_width, max_height) = if align_items == Alignment::Fill {
                 axis.pack(max_main, cross)
             } else {
                 axis.pack(max_main, max_cross)
@@ -184,7 +181,7 @@ where
 
             let layout = child.layout(renderer, &child_limits);
 
-            if align_items != CrossAlign::Fill {
+            if align_items != Alignment::Fill {
                 cross = cross.max(axis.cross(layout.size()));
             }
 
@@ -207,7 +204,7 @@ where
         match axis {
             Axis::Horizontal => {
                 node.align(
-                    CrossAlign::Start,
+                    Alignment::Start,
                     align_items,
                     Size::new(0.0, cross),
                 );
@@ -215,7 +212,7 @@ where
             Axis::Vertical => {
                 node.align(
                     align_items,
-                    CrossAlign::Start,
+                    Alignment::Start,
                     Size::new(cross, 0.0),
                 );
             }
diff --git a/native/src/layout/node.rs b/native/src/layout/node.rs
index 2239a654..e9e6058e 100644
--- a/native/src/layout/node.rs
+++ b/native/src/layout/node.rs
@@ -1,4 +1,4 @@
-use crate::{CrossAlign, Point, Rectangle, Size};
+use crate::{Alignment, Point, Rectangle, Size};
 
 /// The bounds of an element and its children.
 #[derive(Debug, Clone, Default)]
@@ -44,32 +44,32 @@ impl Node {
     /// Aligns the [`Node`] in the given space.
     pub fn align(
         &mut self,
-        horizontal_alignment: CrossAlign,
-        vertical_alignment: CrossAlign,
+        horizontal_alignment: Alignment,
+        vertical_alignment: Alignment,
         space: Size,
     ) {
         match horizontal_alignment {
-            CrossAlign::Start => {}
-            CrossAlign::Center => {
+            Alignment::Start => {}
+            Alignment::Center => {
                 self.bounds.x += (space.width - self.bounds.width) / 2.0;
             }
-            CrossAlign::End => {
+            Alignment::End => {
                 self.bounds.x += space.width - self.bounds.width;
             }
-            CrossAlign::Fill => {
+            Alignment::Fill => {
                 self.bounds.width = space.width;
             }
         }
 
         match vertical_alignment {
-            CrossAlign::Start => {}
-            CrossAlign::Center => {
+            Alignment::Start => {}
+            Alignment::Center => {
                 self.bounds.y += (space.height - self.bounds.height) / 2.0;
             }
-            CrossAlign::End => {
+            Alignment::End => {
                 self.bounds.y += space.height - self.bounds.height;
             }
-            CrossAlign::Fill => {
+            Alignment::Fill => {
                 self.bounds.height = space.height;
             }
         }
diff --git a/native/src/lib.rs b/native/src/lib.rs
index cf8b0da5..170a588b 100644
--- a/native/src/lib.rs
+++ b/native/src/lib.rs
@@ -61,9 +61,10 @@ mod debug;
 #[path = "debug/null.rs"]
 mod debug;
 
+pub use iced_core::alignment;
 pub use iced_core::{
-    Align, Background, Color, CrossAlign, Font, HorizontalAlignment, Length,
-    Padding, Point, Rectangle, Size, Vector, VerticalAlignment,
+    Alignment, Background, Color, Font, Length, Padding, Point, Rectangle,
+    Size, Vector,
 };
 pub use iced_futures::{executor, futures};
 
diff --git a/native/src/renderer/null.rs b/native/src/renderer/null.rs
index 2c47ddf2..b5921582 100644
--- a/native/src/renderer/null.rs
+++ b/native/src/renderer/null.rs
@@ -1,8 +1,19 @@
+use crate::alignment;
+use crate::button;
+use crate::checkbox;
+use crate::column;
+use crate::container;
+use crate::pane_grid;
+use crate::progress_bar;
+use crate::radio;
+use crate::row;
+use crate::scrollable;
+use crate::slider;
+use crate::text;
+use crate::text_input;
+use crate::toggler;
 use crate::{
-    button, checkbox, column, container, pane_grid, progress_bar, radio, row,
-    scrollable, slider, text, text_input, toggler, Color, Element, Font,
-    HorizontalAlignment, Layout, Padding, Point, Rectangle, Renderer, Size,
-    VerticalAlignment,
+    Color, Element, Font, Layout, Padding, Point, Rectangle, Renderer, Size,
 };
 
 /// A renderer that does nothing.
@@ -87,8 +98,8 @@ impl text::Renderer for Null {
         _size: u16,
         _font: Font,
         _color: Option<Color>,
-        _horizontal_alignment: HorizontalAlignment,
-        _vertical_alignment: VerticalAlignment,
+        _horizontal_alignment: alignment::Horizontal,
+        _vertical_alignment: alignment::Vertical,
     ) {
     }
 }
diff --git a/native/src/widget/checkbox.rs b/native/src/widget/checkbox.rs
index e74515c6..8bdb6b78 100644
--- a/native/src/widget/checkbox.rs
+++ b/native/src/widget/checkbox.rs
@@ -1,6 +1,7 @@
 //! Show toggle controls using checkboxes.
 use std::hash::Hash;
 
+use crate::alignment::{self, Alignment};
 use crate::event::{self, Event};
 use crate::layout;
 use crate::mouse;
@@ -8,8 +9,8 @@ use crate::row;
 use crate::text;
 use crate::touch;
 use crate::{
-    Clipboard, Color, CrossAlign, Element, Hasher, HorizontalAlignment, Layout,
-    Length, Point, Rectangle, Row, Text, VerticalAlignment, Widget,
+    Clipboard, Color, Element, Hasher, Layout, Length, Point, Rectangle, Row,
+    Text, Widget,
 };
 
 /// A box that can be checked.
@@ -138,7 +139,7 @@ where
         Row::<(), Renderer>::new()
             .width(self.width)
             .spacing(self.spacing)
-            .align_items(CrossAlign::Center)
+            .align_items(Alignment::Center)
             .push(
                 Row::new()
                     .width(Length::Units(self.size))
@@ -202,8 +203,8 @@ where
             self.text_size.unwrap_or(renderer.default_size()),
             self.font,
             self.text_color,
-            HorizontalAlignment::Left,
-            VerticalAlignment::Center,
+            alignment::Horizontal::Left,
+            alignment::Vertical::Center,
         );
 
         let is_mouse_over = bounds.contains(cursor_position);
diff --git a/native/src/widget/column.rs b/native/src/widget/column.rs
index 83e5760a..30cf0781 100644
--- a/native/src/widget/column.rs
+++ b/native/src/widget/column.rs
@@ -5,7 +5,7 @@ use crate::event::{self, Event};
 use crate::layout;
 use crate::overlay;
 use crate::{
-    Clipboard, CrossAlign, Element, Hasher, Layout, Length, Padding, Point,
+    Alignment, Clipboard, Element, Hasher, Layout, Length, Padding, Point,
     Rectangle, Widget,
 };
 
@@ -20,7 +20,7 @@ pub struct Column<'a, Message, Renderer> {
     height: Length,
     max_width: u32,
     max_height: u32,
-    align_items: CrossAlign,
+    align_items: Alignment,
     children: Vec<Element<'a, Message, Renderer>>,
 }
 
@@ -41,7 +41,7 @@ impl<'a, Message, Renderer> Column<'a, Message, Renderer> {
             height: Length::Shrink,
             max_width: u32::MAX,
             max_height: u32::MAX,
-            align_items: CrossAlign::Start,
+            align_items: Alignment::Start,
             children,
         }
     }
@@ -87,7 +87,7 @@ impl<'a, Message, Renderer> Column<'a, Message, Renderer> {
     }
 
     /// Sets the horizontal alignment of the contents of the [`Column`] .
-    pub fn align_items(mut self, align: CrossAlign) -> Self {
+    pub fn align_items(mut self, align: Alignment) -> Self {
         self.align_items = align;
         self
     }
diff --git a/native/src/widget/container.rs b/native/src/widget/container.rs
index ae18db25..0e86ab62 100644
--- a/native/src/widget/container.rs
+++ b/native/src/widget/container.rs
@@ -1,12 +1,13 @@
 //! Decorate content and apply alignment.
 use std::hash::Hash;
 
+use crate::alignment::{self, Alignment};
 use crate::event::{self, Event};
 use crate::layout;
 use crate::overlay;
 use crate::{
-    Align, Clipboard, CrossAlign, Element, Hasher, Layout, Length, Padding,
-    Point, Rectangle, Widget,
+    Clipboard, Element, Hasher, Layout, Length, Padding, Point, Rectangle,
+    Widget,
 };
 
 use std::u32;
@@ -21,8 +22,8 @@ pub struct Container<'a, Message, Renderer: self::Renderer> {
     height: Length,
     max_width: u32,
     max_height: u32,
-    horizontal_alignment: Align,
-    vertical_alignment: Align,
+    horizontal_alignment: alignment::Horizontal,
+    vertical_alignment: alignment::Vertical,
     style: Renderer::Style,
     content: Element<'a, Message, Renderer>,
 }
@@ -42,8 +43,8 @@ where
             height: Length::Shrink,
             max_width: u32::MAX,
             max_height: u32::MAX,
-            horizontal_alignment: Align::Start,
-            vertical_alignment: Align::Start,
+            horizontal_alignment: alignment::Horizontal::Left,
+            vertical_alignment: alignment::Vertical::Top,
             style: Renderer::Style::default(),
             content: content.into(),
         }
@@ -80,26 +81,26 @@ where
     }
 
     /// Sets the content alignment for the horizontal axis of the [`Container`].
-    pub fn align_x(mut self, alignment: Align) -> Self {
+    pub fn align_x(mut self, alignment: alignment::Horizontal) -> Self {
         self.horizontal_alignment = alignment;
         self
     }
 
     /// Sets the content alignment for the vertical axis of the [`Container`].
-    pub fn align_y(mut self, alignment: Align) -> Self {
+    pub fn align_y(mut self, alignment: alignment::Vertical) -> Self {
         self.vertical_alignment = alignment;
         self
     }
 
     /// Centers the contents in the horizontal axis of the [`Container`].
     pub fn center_x(mut self) -> Self {
-        self.horizontal_alignment = Align::Center;
+        self.horizontal_alignment = alignment::Horizontal::Center;
         self
     }
 
     /// Centers the contents in the vertical axis of the [`Container`].
     pub fn center_y(mut self) -> Self {
-        self.vertical_alignment = Align::Center;
+        self.vertical_alignment = alignment::Vertical::Center;
         self
     }
 
@@ -144,8 +145,8 @@ where
             self.padding.top.into(),
         ));
         content.align(
-            CrossAlign::from(self.horizontal_alignment),
-            CrossAlign::from(self.vertical_alignment),
+            Alignment::from(self.horizontal_alignment),
+            Alignment::from(self.vertical_alignment),
             size,
         );
 
diff --git a/native/src/widget/radio.rs b/native/src/widget/radio.rs
index 1ab51051..513b2fce 100644
--- a/native/src/widget/radio.rs
+++ b/native/src/widget/radio.rs
@@ -1,15 +1,16 @@
 //! Create choices using radio buttons.
 use std::hash::Hash;
 
+use crate::alignment::{self, Alignment};
 use crate::event::{self, Event};
+use crate::layout;
 use crate::mouse;
 use crate::row;
 use crate::text;
 use crate::touch;
-use crate::{layout, Color};
 use crate::{
-    Clipboard, CrossAlign, Element, Hasher, HorizontalAlignment, Layout,
-    Length, Point, Rectangle, Row, Text, VerticalAlignment, Widget,
+    Clipboard, Color, Element, Hasher, Layout, Length, Point, Rectangle, Row,
+    Text, Widget,
 };
 
 /// A circular button representing a choice.
@@ -153,7 +154,7 @@ where
         Row::<(), Renderer>::new()
             .width(self.width)
             .spacing(self.spacing)
-            .align_items(CrossAlign::Center)
+            .align_items(Alignment::Center)
             .push(
                 Row::new()
                     .width(Length::Units(self.size))
@@ -214,8 +215,8 @@ where
             self.text_size.unwrap_or(renderer.default_size()),
             self.font,
             self.text_color,
-            HorizontalAlignment::Left,
-            VerticalAlignment::Center,
+            alignment::Horizontal::Left,
+            alignment::Vertical::Center,
         );
 
         let is_mouse_over = bounds.contains(cursor_position);
diff --git a/native/src/widget/row.rs b/native/src/widget/row.rs
index e200e697..1923f213 100644
--- a/native/src/widget/row.rs
+++ b/native/src/widget/row.rs
@@ -3,7 +3,7 @@ use crate::event::{self, Event};
 use crate::layout;
 use crate::overlay;
 use crate::{
-    Clipboard, CrossAlign, Element, Hasher, Layout, Length, Padding, Point,
+    Alignment, Clipboard, Element, Hasher, Layout, Length, Padding, Point,
     Rectangle, Widget,
 };
 
@@ -19,7 +19,7 @@ pub struct Row<'a, Message, Renderer> {
     height: Length,
     max_width: u32,
     max_height: u32,
-    align_items: CrossAlign,
+    align_items: Alignment,
     children: Vec<Element<'a, Message, Renderer>>,
 }
 
@@ -40,7 +40,7 @@ impl<'a, Message, Renderer> Row<'a, Message, Renderer> {
             height: Length::Shrink,
             max_width: u32::MAX,
             max_height: u32::MAX,
-            align_items: CrossAlign::Start,
+            align_items: Alignment::Start,
             children,
         }
     }
@@ -86,7 +86,7 @@ impl<'a, Message, Renderer> Row<'a, Message, Renderer> {
     }
 
     /// Sets the vertical alignment of the contents of the [`Row`] .
-    pub fn align_items(mut self, align: CrossAlign) -> Self {
+    pub fn align_items(mut self, align: Alignment) -> Self {
         self.align_items = align;
         self
     }
diff --git a/native/src/widget/scrollable.rs b/native/src/widget/scrollable.rs
index 0a2155cc..a8e467d3 100644
--- a/native/src/widget/scrollable.rs
+++ b/native/src/widget/scrollable.rs
@@ -6,7 +6,7 @@ use crate::mouse;
 use crate::overlay;
 use crate::touch;
 use crate::{
-    Clipboard, Column, CrossAlign, Element, Hasher, Layout, Length, Padding,
+    Alignment, Clipboard, Column, Element, Hasher, Layout, Length, Padding,
     Point, Rectangle, Size, Vector, Widget,
 };
 
@@ -84,7 +84,7 @@ impl<'a, Message, Renderer: self::Renderer> Scrollable<'a, Message, Renderer> {
     }
 
     /// Sets the horizontal alignment of the contents of the [`Scrollable`] .
-    pub fn align_items(mut self, align_items: CrossAlign) -> Self {
+    pub fn align_items(mut self, align_items: Alignment) -> Self {
         self.content = self.content.align_items(align_items);
         self
     }
diff --git a/native/src/widget/text.rs b/native/src/widget/text.rs
index d8bc0a00..168d49c2 100644
--- a/native/src/widget/text.rs
+++ b/native/src/widget/text.rs
@@ -1,7 +1,8 @@
 //! Write some text for your users to read.
+use crate::alignment;
+use crate::layout;
 use crate::{
-    layout, Color, Element, Hasher, HorizontalAlignment, Layout, Length, Point,
-    Rectangle, Size, VerticalAlignment, Widget,
+    Color, Element, Hasher, Layout, Length, Point, Rectangle, Size, Widget,
 };
 
 pub use iced_core::text::Hit;
@@ -29,8 +30,8 @@ pub struct Text<Renderer: self::Renderer> {
     font: Renderer::Font,
     width: Length,
     height: Length,
-    horizontal_alignment: HorizontalAlignment,
-    vertical_alignment: VerticalAlignment,
+    horizontal_alignment: alignment::Horizontal,
+    vertical_alignment: alignment::Vertical,
 }
 
 impl<Renderer: self::Renderer> Text<Renderer> {
@@ -43,8 +44,8 @@ impl<Renderer: self::Renderer> Text<Renderer> {
             font: Default::default(),
             width: Length::Shrink,
             height: Length::Shrink,
-            horizontal_alignment: HorizontalAlignment::Left,
-            vertical_alignment: VerticalAlignment::Top,
+            horizontal_alignment: alignment::Horizontal::Left,
+            vertical_alignment: alignment::Vertical::Top,
         }
     }
 
@@ -83,14 +84,17 @@ impl<Renderer: self::Renderer> Text<Renderer> {
     /// Sets the [`HorizontalAlignment`] of the [`Text`].
     pub fn horizontal_alignment(
         mut self,
-        alignment: HorizontalAlignment,
+        alignment: alignment::Horizontal,
     ) -> Self {
         self.horizontal_alignment = alignment;
         self
     }
 
     /// Sets the [`VerticalAlignment`] of the [`Text`].
-    pub fn vertical_alignment(mut self, alignment: VerticalAlignment) -> Self {
+    pub fn vertical_alignment(
+        mut self,
+        alignment: alignment::Vertical,
+    ) -> Self {
         self.vertical_alignment = alignment;
         self
     }
@@ -215,8 +219,8 @@ pub trait Renderer: crate::Renderer {
         size: u16,
         font: Self::Font,
         color: Option<Color>,
-        horizontal_alignment: HorizontalAlignment,
-        vertical_alignment: VerticalAlignment,
+        horizontal_alignment: alignment::Horizontal,
+        vertical_alignment: alignment::Vertical,
     ) -> Self::Output;
 }
 
diff --git a/native/src/widget/toggler.rs b/native/src/widget/toggler.rs
index 34dc52a0..c624be4c 100644
--- a/native/src/widget/toggler.rs
+++ b/native/src/widget/toggler.rs
@@ -1,10 +1,15 @@
 //! Show toggle controls using togglers.
 use std::hash::Hash;
 
+use crate::alignment;
+use crate::event;
+use crate::layout;
+use crate::mouse;
+use crate::row;
+use crate::text;
 use crate::{
-    event, layout, mouse, row, text, Clipboard, CrossAlign, Element, Event,
-    Hasher, HorizontalAlignment, Layout, Length, Point, Rectangle, Row, Text,
-    VerticalAlignment, Widget,
+    Alignment, Clipboard, Element, Event, Hasher, Layout, Length, Point,
+    Rectangle, Row, Text, Widget,
 };
 
 /// A toggler widget
@@ -30,7 +35,7 @@ pub struct Toggler<Message, Renderer: self::Renderer + text::Renderer> {
     width: Length,
     size: u16,
     text_size: Option<u16>,
-    text_alignment: HorizontalAlignment,
+    text_alignment: alignment::Horizontal,
     spacing: u16,
     font: Renderer::Font,
     style: Renderer::Style,
@@ -62,7 +67,7 @@ impl<Message, Renderer: self::Renderer + text::Renderer>
             width: Length::Fill,
             size: <Renderer as self::Renderer>::DEFAULT_SIZE,
             text_size: None,
-            text_alignment: HorizontalAlignment::Left,
+            text_alignment: alignment::Horizontal::Left,
             spacing: 0,
             font: Renderer::Font::default(),
             style: Renderer::Style::default(),
@@ -88,7 +93,7 @@ impl<Message, Renderer: self::Renderer + text::Renderer>
     }
 
     /// Sets the horizontal alignment of the text of the [`Toggler`]
-    pub fn text_alignment(mut self, alignment: HorizontalAlignment) -> Self {
+    pub fn text_alignment(mut self, alignment: alignment::Horizontal) -> Self {
         self.text_alignment = alignment;
         self
     }
@@ -132,7 +137,7 @@ where
         let mut row = Row::<(), Renderer>::new()
             .width(self.width)
             .spacing(self.spacing)
-            .align_items(CrossAlign::Center);
+            .align_items(Alignment::Center);
 
         if let Some(label) = &self.label {
             row = row.push(
@@ -202,7 +207,7 @@ where
                     self.font,
                     None,
                     self.text_alignment,
-                    VerticalAlignment::Center,
+                    alignment::Vertical::Center,
                 ))
             }
 
diff --git a/src/lib.rs b/src/lib.rs
index 5ef25d2e..0020ed87 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -245,8 +245,9 @@ pub use result::Result;
 pub use sandbox::Sandbox;
 pub use settings::Settings;
 
+pub use runtime::alignment;
+pub use runtime::futures;
 pub use runtime::{
-    futures, Align, Background, Color, Command, CrossAlign, Font,
-    HorizontalAlignment, Length, Point, Rectangle, Size, Subscription, Vector,
-    VerticalAlignment,
+    Alignment, Background, Color, Command, Font, Length, Point, Rectangle,
+    Size, Subscription, Vector,
 };
diff --git a/web/src/css.rs b/web/src/css.rs
index c132d045..07589150 100644
--- a/web/src/css.rs
+++ b/web/src/css.rs
@@ -1,5 +1,6 @@
 //! Style your widgets.
-use crate::{bumpalo, Align, Background, Color, CrossAlign, Length, Padding};
+use crate::bumpalo;
+use crate::{Alignment, Background, Color, Length, Padding};
 
 use std::collections::BTreeMap;
 
@@ -195,22 +196,13 @@ pub fn background(background: Background) -> String {
     }
 }
 
-/// Returns the style value for the given [`Align`].
-pub fn align(align: Align) -> &'static str {
-    match align {
-        Align::Start => "flex-start",
-        Align::Center => "center",
-        Align::End => "flex-end",
-    }
-}
-
-/// Returns the style value for the given [`CrossAlign`].
-pub fn cross_align(align: CrossAlign) -> &'static str {
-    match align {
-        CrossAlign::Start => "flex-start",
-        CrossAlign::Center => "center",
-        CrossAlign::End => "flex-end",
-        CrossAlign::Fill => "stretch",
+/// Returns the style value for the given [`Alignment`].
+pub fn alignment(alignment: Alignment) -> &'static str {
+    match alignment {
+        Alignment::Start => "flex-start",
+        Alignment::Center => "center",
+        Alignment::End => "flex-end",
+        Alignment::Fill => "stretch",
     }
 }
 
diff --git a/web/src/lib.rs b/web/src/lib.rs
index b968c96f..4679b457 100644
--- a/web/src/lib.rs
+++ b/web/src/lib.rs
@@ -73,13 +73,18 @@ pub use css::Css;
 pub use dodrio;
 pub use element::Element;
 pub use hasher::Hasher;
+pub use subscription::Subscription;
+
+pub use iced_core::alignment;
+pub use iced_core::keyboard;
+pub use iced_core::mouse;
+pub use iced_futures::executor;
+pub use iced_futures::futures;
+
 pub use iced_core::{
-    keyboard, mouse, Align, Background, Color, CrossAlign, Font,
-    HorizontalAlignment, Length, Padding, Point, Rectangle, Size, Vector,
-    VerticalAlignment,
+    Alignment, Background, Color, Font, Length, Padding, Point, Rectangle,
+    Size, Vector,
 };
-pub use iced_futures::{executor, futures};
-pub use subscription::Subscription;
 
 #[doc(no_inline)]
 pub use widget::*;
diff --git a/web/src/widget/column.rs b/web/src/widget/column.rs
index 8738c2af..30a57c41 100644
--- a/web/src/widget/column.rs
+++ b/web/src/widget/column.rs
@@ -1,4 +1,5 @@
-use crate::{css, Align, Bus, Css, Element, Length, Padding, Widget};
+use crate::css;
+use crate::{Alignment, Bus, Css, Element, Length, Padding, Widget};
 
 use dodrio::bumpalo;
 use std::u32;
@@ -14,7 +15,7 @@ pub struct Column<'a, Message> {
     height: Length,
     max_width: u32,
     max_height: u32,
-    align_items: Align,
+    align_items: Alignment,
     children: Vec<Element<'a, Message>>,
 }
 
@@ -33,7 +34,7 @@ impl<'a, Message> Column<'a, Message> {
             height: Length::Shrink,
             max_width: u32::MAX,
             max_height: u32::MAX,
-            align_items: Align::Start,
+            align_items: Alignment::Start,
             children,
         }
     }
@@ -79,7 +80,7 @@ impl<'a, Message> Column<'a, Message> {
     }
 
     /// Sets the horizontal alignment of the contents of the [`Column`] .
-    pub fn align_items(mut self, align: Align) -> Self {
+    pub fn align_items(mut self, align: Alignment) -> Self {
         self.align_items = align;
         self
     }
@@ -129,7 +130,7 @@ impl<'a, Message> Widget<Message> for Column<'a, Message> {
                     css::max_length(self.max_width),
                     css::max_length(self.max_height),
                     css::padding(self.padding),
-                    css::align(self.align_items)
+                    css::alignment(self.align_items)
                 ).into_bump_str()
             )
             .children(children)
diff --git a/web/src/widget/container.rs b/web/src/widget/container.rs
index c006e011..24aa7cef 100644
--- a/web/src/widget/container.rs
+++ b/web/src/widget/container.rs
@@ -1,5 +1,8 @@
 //! Decorate content and apply alignment.
-use crate::{bumpalo, css, Align, Bus, Css, Element, Length, Padding, Widget};
+use crate::alignment::{self, Alignment};
+use crate::bumpalo;
+use crate::css;
+use crate::{Bus, Css, Element, Length, Padding, Widget};
 
 pub use iced_style::container::{Style, StyleSheet};
 
@@ -14,8 +17,8 @@ pub struct Container<'a, Message> {
     max_width: u32,
     #[allow(dead_code)]
     max_height: u32,
-    horizontal_alignment: Align,
-    vertical_alignment: Align,
+    horizontal_alignment: alignment::Horizontal,
+    vertical_alignment: alignment::Vertical,
     style_sheet: Box<dyn StyleSheet>,
     content: Element<'a, Message>,
 }
@@ -34,8 +37,8 @@ impl<'a, Message> Container<'a, Message> {
             height: Length::Shrink,
             max_width: u32::MAX,
             max_height: u32::MAX,
-            horizontal_alignment: Align::Start,
-            vertical_alignment: Align::Start,
+            horizontal_alignment: alignment::Horizontal::Left,
+            vertical_alignment: alignment::Vertical::Top,
             style_sheet: Default::default(),
             content: content.into(),
         }
@@ -73,14 +76,14 @@ impl<'a, Message> Container<'a, Message> {
 
     /// Centers the contents in the horizontal axis of the [`Container`].
     pub fn center_x(mut self) -> Self {
-        self.horizontal_alignment = Align::Center;
+        self.horizontal_alignment = alignment::Horizontal::Center;
 
         self
     }
 
     /// Centers the contents in the vertical axis of the [`Container`].
     pub fn center_y(mut self) -> Self {
-        self.vertical_alignment = Align::Center;
+        self.vertical_alignment = alignment::Vertical::Center;
 
         self
     }
@@ -122,8 +125,8 @@ where
                     css::length(self.height),
                     css::max_length(self.max_width),
                     css::padding(self.padding),
-                    css::align(self.horizontal_alignment),
-                    css::align(self.vertical_alignment),
+                    css::alignment(Alignment::from(self.horizontal_alignment)),
+                    css::alignment(Alignment::from(self.vertical_alignment)),
                     style.background.map(css::background).unwrap_or(String::from("initial")),
                     style.text_color.map(css::color).unwrap_or(String::from("inherit")),
                     style.border_width,
diff --git a/web/src/widget/row.rs b/web/src/widget/row.rs
index ffb515cf..13eab27d 100644
--- a/web/src/widget/row.rs
+++ b/web/src/widget/row.rs
@@ -1,4 +1,5 @@
-use crate::{css, Align, Bus, Css, Element, Length, Padding, Widget};
+use crate::css;
+use crate::{Alignment, Bus, Css, Element, Length, Padding, Widget};
 
 use dodrio::bumpalo;
 use std::u32;
@@ -14,7 +15,7 @@ pub struct Row<'a, Message> {
     height: Length,
     max_width: u32,
     max_height: u32,
-    align_items: Align,
+    align_items: Alignment,
     children: Vec<Element<'a, Message>>,
 }
 
@@ -33,7 +34,7 @@ impl<'a, Message> Row<'a, Message> {
             height: Length::Shrink,
             max_width: u32::MAX,
             max_height: u32::MAX,
-            align_items: Align::Start,
+            align_items: Alignment::Start,
             children,
         }
     }
@@ -79,7 +80,7 @@ impl<'a, Message> Row<'a, Message> {
     }
 
     /// Sets the vertical alignment of the contents of the [`Row`] .
-    pub fn align_items(mut self, align: Align) -> Self {
+    pub fn align_items(mut self, align: Alignment) -> Self {
         self.align_items = align;
         self
     }
@@ -129,7 +130,7 @@ impl<'a, Message> Widget<Message> for Row<'a, Message> {
                     css::max_length(self.max_width),
                     css::max_length(self.max_height),
                     css::padding(self.padding),
-                    css::align(self.align_items)
+                    css::alignment(self.align_items)
                 ).into_bump_str()
             )
             .children(children)
diff --git a/web/src/widget/scrollable.rs b/web/src/widget/scrollable.rs
index ce0a10d4..847bf5a0 100644
--- a/web/src/widget/scrollable.rs
+++ b/web/src/widget/scrollable.rs
@@ -1,7 +1,7 @@
 //! Navigate an endless amount of content with a scrollbar.
-use crate::{
-    bumpalo, css, Align, Bus, Column, Css, Element, Length, Padding, Widget,
-};
+use crate::bumpalo;
+use crate::css;
+use crate::{Alignment, Bus, Column, Css, Element, Length, Padding, Widget};
 
 pub use iced_style::scrollable::{Scrollbar, Scroller, StyleSheet};
 
@@ -72,7 +72,7 @@ impl<'a, Message> Scrollable<'a, Message> {
     }
 
     /// Sets the horizontal alignment of the contents of the [`Scrollable`] .
-    pub fn align_items(mut self, align_items: Align) -> Self {
+    pub fn align_items(mut self, align_items: Alignment) -> Self {
         self.content = self.content.align_items(align_items);
         self
     }
diff --git a/web/src/widget/text.rs b/web/src/widget/text.rs
index 72232dc0..53d57bfd 100644
--- a/web/src/widget/text.rs
+++ b/web/src/widget/text.rs
@@ -1,7 +1,6 @@
-use crate::{
-    css, Bus, Color, Css, Element, Font, HorizontalAlignment, Length,
-    VerticalAlignment, Widget,
-};
+use crate::alignment;
+use crate::css;
+use crate::{Bus, Color, Css, Element, Font, Length, Widget};
 use dodrio::bumpalo;
 
 /// A paragraph of text.
@@ -22,8 +21,8 @@ pub struct Text {
     font: Font,
     width: Length,
     height: Length,
-    horizontal_alignment: HorizontalAlignment,
-    vertical_alignment: VerticalAlignment,
+    horizontal_alignment: alignment::Horizontal,
+    vertical_alignment: alignment::Vertical,
 }
 
 impl Text {
@@ -36,8 +35,8 @@ impl Text {
             font: Font::Default,
             width: Length::Shrink,
             height: Length::Shrink,
-            horizontal_alignment: HorizontalAlignment::Left,
-            vertical_alignment: VerticalAlignment::Top,
+            horizontal_alignment: alignment::Horizontal::Left,
+            vertical_alignment: alignment::Vertical::Top,
         }
     }
 
@@ -74,14 +73,17 @@ impl Text {
     /// Sets the [`HorizontalAlignment`] of the [`Text`].
     pub fn horizontal_alignment(
         mut self,
-        alignment: HorizontalAlignment,
+        alignment: alignment::Horizontal,
     ) -> Self {
         self.horizontal_alignment = alignment;
         self
     }
 
     /// Sets the [`VerticalAlignment`] of the [`Text`].
-    pub fn vertical_alignment(mut self, alignment: VerticalAlignment) -> Self {
+    pub fn vertical_alignment(
+        mut self,
+        alignment: alignment::Vertical,
+    ) -> Self {
         self.vertical_alignment = alignment;
         self
     }
@@ -111,9 +113,9 @@ impl<'a, Message> Widget<Message> for Text {
         let height = css::length(self.height);
 
         let text_align = match self.horizontal_alignment {
-            HorizontalAlignment::Left => "left",
-            HorizontalAlignment::Center => "center",
-            HorizontalAlignment::Right => "right",
+            alignment::Horizontal::Left => "left",
+            alignment::Horizontal::Center => "center",
+            alignment::Horizontal::Right => "right",
         };
 
         let style = bumpalo::format!(
diff --git a/wgpu/src/backend.rs b/wgpu/src/backend.rs
index 51429e84..73fa5c5f 100644
--- a/wgpu/src/backend.rs
+++ b/wgpu/src/backend.rs
@@ -7,8 +7,9 @@ use iced_graphics::backend;
 use iced_graphics::font;
 use iced_graphics::layer::Layer;
 use iced_graphics::{Primitive, Viewport};
+use iced_native::alignment;
 use iced_native::mouse;
-use iced_native::{Font, HorizontalAlignment, Size, VerticalAlignment};
+use iced_native::{Font, Size};
 
 #[cfg(any(feature = "image_rs", feature = "svg"))]
 use crate::image;
@@ -207,24 +208,24 @@ impl Backend {
                     }],
                     layout: wgpu_glyph::Layout::default()
                         .h_align(match text.horizontal_alignment {
-                            HorizontalAlignment::Left => {
+                            alignment::Horizontal::Left => {
                                 wgpu_glyph::HorizontalAlign::Left
                             }
-                            HorizontalAlignment::Center => {
+                            alignment::Horizontal::Center => {
                                 wgpu_glyph::HorizontalAlign::Center
                             }
-                            HorizontalAlignment::Right => {
+                            alignment::Horizontal::Right => {
                                 wgpu_glyph::HorizontalAlign::Right
                             }
                         })
                         .v_align(match text.vertical_alignment {
-                            VerticalAlignment::Top => {
+                            alignment::Vertical::Top => {
                                 wgpu_glyph::VerticalAlign::Top
                             }
-                            VerticalAlignment::Center => {
+                            alignment::Vertical::Center => {
                                 wgpu_glyph::VerticalAlign::Center
                             }
-                            VerticalAlignment::Bottom => {
+                            alignment::Vertical::Bottom => {
                                 wgpu_glyph::VerticalAlign::Bottom
                             }
                         }),