new align

docs/styles/align.md

@@ -0,0 +1,68 @@
+# Align
+
+The `align` style aligns children within a container.
+
+## Syntax
+
+```
+align: <HORIZONTAL> <VERTICAL>;
+align-horizontal: <HORIZONTAL>;
+align-vertical: <VERTICAL>;
+```
+
+
+### Values
+
+#### `HORIZONTAL`
+
+| 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  |
+
+#### `VERTICAL`
+
+| 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 |
+
+
+## Example
+
+=== "align.py"
+
+    ```python
+    --8<-- "docs/examples/styles/align.py"
+    ```
+
+=== "align.css"
+
+    ```scss hl_lines="2"
+    --8<-- "docs/examples/styles/align.css"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/align.py"}
+
+    ```
+
+## CSS
+
+```sass
+/* Align child widgets to the center. */
+align: center middle;
+/* Align child widget to th top right */
+align: right top;
+```
+
+## Python
+```python
+# Align child widgets to the center
+widget.styles.align = ("center", "middle")
+# Align child widgets to the top right
+widget.styles.align = ("right", "top")
+```

docs/styles/layout.md

@@ -13,8 +13,7 @@ layout: [center|grid|horizontal|vertical];
 ### Values
 
 | Value                | Description                                                                   |
-|----------------------|-------------------------------------------------------------------------------|
-| `center`             | A single child widget will be placed in the center.                           |
+| -------------------- | ----------------------------------------------------------------------------- |
 | `grid`               | Child widgets will be arranged in a grid.                                     |
 | `horizontal`         | Child widgets will be arranged along the horizontal axis, from left to right. |
 | `vertical` (default) | Child widgets will be arranged along the vertical axis, from top to bottom.   |