alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update reference for content align rule.

Browse Source
This commit is contained in:
Rodrigo Girão Serrão
2022-12-21 22:09:58 +00:00
parent 969d3057b3
commit 95a1c8f7be
1 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
docs/styles/content_align.md
View File

@@ -3,35 +3,34 @@
The `content-align` style aligns content _inside_ a widget. The `content-align` style aligns content _inside_ a widget.
Not to be confused with [`align`](../align). Not to be confused with [`align`](../align).
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.
## Syntax ## Syntax
``` --8<-- "docs/snippets/syntax_block_start.md"
content-align: <HORIZONTAL> <VERTICAL>; content-align: <a href="../css_types/horizontal.md">&lt;horizontal&gt;</a> <a href="../css_types/vertical.md">&lt;vertical&gt;</a>;
content-align-horizontal: <HORIZONTAL>;
content-align-vertical: <VERTICAL>; content-align-horizontal: <a href="../css_types/horizontal.md">&lt;horizontal&gt;</a>;
``` content-align-vertical: <a href="../css_types/vertical.md">&lt;vertical&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
The style `content-align` takes a [`<horizontal>`](../css_types/horizontal.md) followed by a [`<vertical>`](../css_types/vertical.md).
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>`](../css_types/horizontal.md) and does alignment along the horizontal axis; and
- `content-align-vertical` takes a [`<vertical>`](../css_types/vertical.md) and does alignment along the vertical axis.
### Values ### Values
#### `HORIZONTAL` #### &lt;horizontal&gt;
| Value | Description | --8<-- "docs/snippets/type_syntax/horizontal.md"
| ---------------- | -------------------------------------------------- |
| `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` #### &lt;vertical&gt;
| Value | Description | --8<-- "docs/snippets/type_syntax/vertical.md"
| --------------- | ------------------------------------------------ |
| `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 |
## Examples ## Examples