diff --git a/docs/styles/content_align.md b/docs/styles/content_align.md
index b085e5cb3..5208314ca 100644
--- a/docs/styles/content_align.md
+++ b/docs/styles/content_align.md
@@ -3,35 +3,34 @@
 The `content-align` style aligns content _inside_ a widget.
 Not to be confused with [`align`](../align).
 
-You can specify the alignment of content on both the horizontal and vertical axes at the same time,
-or on each of the axis separately.
-
 
 ## Syntax
 
-```
-content-align: <HORIZONTAL> <VERTICAL>;
-content-align-horizontal: <HORIZONTAL>;
-content-align-vertical: <VERTICAL>;
-```
+--8<-- "docs/snippets/syntax_block_start.md"
+content-align: <a href="../css_types/horizontal.md">&lt;horizontal&gt;</a> <a href="../css_types/vertical.md">&lt;vertical&gt;</a>;
+
+content-align-horizontal: <a href="../css_types/horizontal.md">&lt;horizontal&gt;</a>;
+content-align-vertical: <a href="../css_types/vertical.md">&lt;vertical&gt;</a>;
+--8<-- "docs/snippets/syntax_block_end.md"
+
+The style `content-align` takes a [`<horizontal>`](../css_types/horizontal.md) followed by a [`<vertical>`](../css_types/vertical.md).
+
+You can specify the alignment of content on both the horizontal and vertical axes at the same time,
+or on each of the axis separately.
+To specify content alignment on a single axis, use the respective style and type:
+
+ - `content-align-horizontal` takes a [`<horizontal>`](../css_types/horizontal.md) and does alignment along the horizontal axis; and
+ - `content-align-vertical` takes a [`<vertical>`](../css_types/vertical.md) and does alignment along the vertical axis.
 
 ### Values
 
-#### `HORIZONTAL`
+#### &lt;horizontal&gt;
 
-| Value            | Description                                        |
-| ---------------- | -------------------------------------------------- |
-| `left` (default) | Align content on the left of the horizontal axis   |
-| `center`         | Align content in the center of the horizontal axis |
-| `right`          | Align content on the right of the horizontal axis  |
+--8<-- "docs/snippets/type_syntax/horizontal.md"
 
-#### `VERTICAL`
+#### &lt;vertical&gt;
 
-| Value           | Description                                      |
-| --------------- | ------------------------------------------------ |
-| `top` (default) | Align content at the top of the vertical axis    |
-| `middle`        | Align content in the middle of the vertical axis |
-| `bottom`        | Align content at the bottom of the vertical axis |
+--8<-- "docs/snippets/type_syntax/vertical.md"
 
 ## Examples