diff --git a/book/src/guides/layout.md b/book/src/guides/layout.md
index d68bc8494..fb98c2ceb 100644
--- a/book/src/guides/layout.md
+++ b/book/src/guides/layout.md
@@ -2,9 +2,9 @@
 
 Learn how the layout attributes work.
 
-- [`width & height`](#width_&_height)
-- [`min_width & min_height`](#min_width_&_min_height)
-- [`max_width & max_height`](#max_width_&_max_height)
+- [`width & height`](#width--height)
+- [`min_width & min_height`](#min_width--min_height)
+- [`max_width & max_height`](#max_width--max_height)
 - [`Size units`](#size_units)
   - [`Logical pixels`](#logical-pixels)
   - [`Percentages`](#percentages)
@@ -12,7 +12,7 @@ Learn how the layout attributes work.
 - [`direction`](#direction)
 - [`padding`](#padding)
 - [`margin`](#margin)
-- [`main_alignment & cross_alignment`](#main_alignment_&_cross_alignment)
+- [`main_align & cross_align`](#main_align--cross_align)
 
 > ⚠️ Freya's layout is still somewhat limited.
 
@@ -168,16 +168,17 @@ fn app(cx: Scope) -> Element {
 
 ```
 
-### main_alignment & cross_alignment
+### main_align & cross_align
 
 Control how the inner elements are positioned inside the element. You can combine it with the `direction` attribute to create complex flows.
-Possible values for both are:
+
+Possible values for both attributes are:
 - `start` (default): At the begining of the axis
 - `center`: At the center of the axis
 - `end`: At the end of the axis
 
-When using the `vertical` direction, `main_alignment` will be the Y axis and `cross_alignment` will be the X axis. But when using the `horizontal` direction, the
-`main_alignment` will be the X axis and the `cross_alignment` will be the Y axis.
+When using the `vertical` direction, `main_align` will be the Y axis and `cross_align` will be the X axis. But when using the `horizontal` direction, the
+`main_align` will be the X axis and the `cross_align` will be the Y axis.
 
 Example on how to center the inner elements in both axis:
 
diff --git a/crates/state/src/layout.rs b/crates/state/src/layout.rs
index bc9febcf6..0870e90cc 100644
--- a/crates/state/src/layout.rs
+++ b/crates/state/src/layout.rs
@@ -53,8 +53,8 @@ impl State<CustomAttributeValues> for LayoutState {
             "direction",
             "offset_y",
             "offset_x",
-            "main_alignment",
-            "cross_alignment",
+            "main_align",
+            "cross_align",
             "reference",
             "margin",
         ]))
diff --git a/examples/alignment.rs b/examples/alignment.rs
index 72b75cbe1..136a977c9 100644
--- a/examples/alignment.rs
+++ b/examples/alignment.rs
@@ -37,9 +37,20 @@ fn app(cx: Scope) -> Element {
                         background: "green"
                     }
                     rect {
-                        width: "50",
-                        height: "50",
-                        background: "orange"
+                        main_align: "center",
+                        cross_align: "center",
+                        background: "orange",
+                        padding: "15",
+                        rect {
+                            width: "20",
+                            height: "20",
+                            background: "black"
+                        }
+                        rect {
+                            width: "20",
+                            height: "20",
+                            background: "white"
+                        }
                     }
                 }
                 rect {