textual/docs/styles/align.md

Align

The align style aligns children within a container.

Syntax

--8<-- "docs/snippets/syntax_block_start.md" align: <horizontal> <vertical>;

align-horizontal: <horizontal>; align-vertical: <vertical>; --8<-- "docs/snippets/syntax_block_end.md"

The style align takes a <horizontal> followed by a <vertical>.

You can specify the alignment of children on both the horizontal and vertical axes at the same time, or on each of the axis separately. To specify alignment on a single axis, use the respective style and type:

• align-horizontal takes a <horizontal> and does alignment along the horizontal axis; and
• align-vertical takes a <vertical> and does alignment along the vertical axis.

Examples

Basic usage

This example contains a simple app with two labels centered on the screen with align: center middle;:

=== "Output"

```{.textual path="docs/examples/styles/align.py"}
```

=== "align.py"

```python
--8<-- "docs/examples/styles/align.py"
```

=== "align.css"

```sass hl_lines="2"
--8<-- "docs/examples/styles/align.css"
```

All alignments

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.

=== "Output"

```{.textual path="docs/examples/styles/align_all.py"}
```

=== "align_all.py"

```python
--8<-- "docs/examples/styles/align_all.py"
```

=== "align_all.css"

```sass hl_lines="2 6 10 14 18 22 26 30 34"
--8<-- "docs/examples/styles/align_all.css"
```

CSS

/* Align child widgets to the center. */
align: center middle;
/* Align child widget to the top right */
align: right top;

/* Change the horizontal alignment of the children of a widget */
align-horizontal: right;
/* Change the vertical alignment of the children of a widget */
align-vertical: middle;

Python

# Align child widgets to the center
widget.styles.align = ("center", "middle")
# Align child widgets to the top right
widget.styles.align = ("right", "top")

# Change the horizontal alignment of the children of a widget
widget.styles.align_horizontal = "right"
# Change the vertical alignment of the children of a widget
widget.styles.align_vertical = "middle"

See also

• content-align to set the alignment of content inside a widget.
• text-align to set the alignment of text in a widget.