Content-align

The content-align style aligns content inside a widget.

Syntax

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

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

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

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> and does alignment along the horizontal axis; and
content-align-vertical takes a <vertical> and does alignment along the vertical axis.

Examples

Basic usage

This first example shows three labels stacked vertically, each with different content alignments.

=== "Output"

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

=== "content_align.py"

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

=== "content_align.tcss"

```css hl_lines="2 7-8 13"
--8<-- "docs/examples/styles/content_align.tcss"
```

All content alignments

The next example shows a 3 by 3 grid of labels. Each label has its text aligned differently.

=== "Output"

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

=== "content_align_all.py"

```py
--8<-- "docs/examples/styles/content_align_all.py"
```

=== "content_align_all.tcss"

```css hl_lines="2 5 8 11 14 17 20 23 26"
--8<-- "docs/examples/styles/content_align_all.tcss"
```

CSS

/* Align content in the very center of a widget */
content-align: center middle;
/* Align content at the top right of a widget */
content-align: right top;

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

Python

# Align content in the very center of a widget
widget.styles.content_align = ("center", "middle")
# Align content at the top right of a widget
widget.styles.content_align = ("right", "top")

# Change the horizontal alignment of the content of a widget
widget.styles.content_align_horizontal = "right"
# Change the vertical alignment of the content of a widget
widget.styles.content_align_vertical = "middle"

2.9 KiB Raw Blame History