Add complete alignment grid screenshot.

docs/examples/styles/align_all.css

@@ -0,0 +1,53 @@
+#left-top {
+    /* align: left top; this is the default value and is implied. */
+}
+
+#center-top {
+    align: center top;
+}
+
+#right-top {
+    align: right top;
+}
+
+#left-middle {
+    align: left middle;
+}
+
+#center-middle {
+    align: center middle;
+}
+
+#right-middle {
+    align: right middle;
+}
+
+#left-bottom {
+    align: left bottom;
+}
+
+#center-bottom {
+    align: center bottom;
+}
+
+#right-bottom {
+    align: right bottom;
+}
+
+Screen {
+    layout: grid;
+    grid-size: 3 3;
+    grid-gutter: 1;
+}
+
+Container {
+    background: $boost;
+    border: solid gray;
+    height: 100%;
+}
+
+Label {
+    width: auto;
+    height: 1;
+    background: $accent;
+}

docs/examples/styles/align_all.py

@@ -0,0 +1,20 @@
+from textual.app import App, ComposeResult
+from textual.containers import Container
+from textual.widgets import Label
+
+
+class AlignAllApp(App):
+    """App that illustrates all alignments."""
+
+    CSS_PATH = "align_all.css"
+
+    def compose(self) -> ComposeResult:
+        yield Container(Label("left top"), id="left-top")
+        yield Container(Label("center top"), id="center-top")
+        yield Container(Label("right top"), id="right-top")
+        yield Container(Label("left middle"), id="left-middle")
+        yield Container(Label("center middle"), id="center-middle")
+        yield Container(Label("right middle"), id="right-middle")
+        yield Container(Label("left bottom"), id="left-bottom")
+        yield Container(Label("center bottom"), id="center-bottom")
+        yield Container(Label("right bottom"), id="right-bottom")

docs/styles/align.md

@@ -30,7 +30,9 @@ align-vertical: <VERTICAL>;
 | `bottom`        | Align content at the bottom of the vertical axis |
 
 
-## Example
+## Examples
+
+This example contains a simple app with two labels centered on the screen with `align: center middle;`:
 
 === "align.py"
 
@@ -50,6 +52,26 @@ align-vertical: <VERTICAL>;
 
     ```
 
+The next example shows a 3 by 3 grid of containers with text labels.
+Each label has been aligned differently inside its container, and its text shows its `align: ...` value.
+
+=== "align_all.py"
+
+    ```python
+    --8<-- "docs/examples/styles/align_all.py"
+    ```
+
+=== "align_all.css"
+
+    ```css
+    --8<-- "docs/examples/styles/align_all.css"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/align_all.py"}
+    ```
+
 ## CSS
 
 ```sass