Files
textual/docs/styles/text_align.md
Rodrigo Girão Serrão 042bc3b3fe Improve text-align example.
Replace statics with labels; change to a 2 x 2 grid layout to make it easier to see the difference between 'center' and 'justify'; increase readability by setting 'color: auto' in the labels.
2023-01-06 10:41:46 +00:00

1.2 KiB

Text-align

The text-align rule sets the text alignment in a widget.

Syntax

--8<-- "docs/snippets/syntax_block_start.md" text-align: <text-align>; --8<-- "docs/snippets/syntax_block_end.md"

The text-align rule accepts a value of the type <text-align> that defines how text is aligned inside the widget.

Values

--8<-- "docs/snippets/type_syntax/text_align.md"

Defaults

The default value is start.

Example

This example shows, from top to bottom: left, center, right, and justify text alignments.

=== "Output"

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

=== "text_align.py"

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

=== "text_align.css"

```css hl_lines="2 7 12 17"
--8<-- "docs/examples/styles/text_align.css"
```

CSS

/* Set text in the widget to be right aligned */
text-align: right;

Python

# Set text in the widget to be right aligned
widget.styles.text_align = "right"