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

Complete reference for content-align.

Browse Source
This commit is contained in:
Rodrigo Girão Serrão
2022-12-15 18:10:36 +00:00
parent 378f25a2b4
commit 155f5ede7b
1 changed files with 40 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
docs/styles/content_align.md
View File

@@ -1,13 +1,18 @@
# Content-align # Content-align
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).
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.
You can specify the alignment of content on both the horizontal and vertical axes.
## Syntax ## Syntax
``` ```
content-align: <HORIZONTAL> <VERTICAL>; content-align: <HORIZONTAL> <VERTICAL>;
content-align-horizontal: <HORIZONTAL>;
content-align-vertical: <VERTICAL>;
``` ```
### Values ### Values
@@ -28,7 +33,9 @@ content-align: <HORIZONTAL> <VERTICAL>;
| `middle` | Align content in the middle of the vertical axis | | `middle` | Align content in the middle of the vertical axis |
| `bottom` | Align content at the bottom of the vertical axis | | `bottom` | Align content at the bottom of the vertical axis |
## Example ## Examples
This first example shows three labels stacked vertically, each with different content alignments.
=== "content_align.py" === "content_align.py"
@@ -38,7 +45,7 @@ content-align: <HORIZONTAL> <VERTICAL>;
=== "content_align.css" === "content_align.css"
```scss ```scss hl_lines="2 7-8 13"
--8<-- "docs/examples/styles/content_align.css" --8<-- "docs/examples/styles/content_align.css"
``` ```
@@ -47,6 +54,26 @@ content-align: <HORIZONTAL> <VERTICAL>;
```{.textual path="docs/examples/styles/content_align.py"} ```{.textual path="docs/examples/styles/content_align.py"}
``` ```
The next example shows a 3 by 3 grid of labels.
Each label has its text aligned differently.
=== "content_align_all.py"
```py
--8<-- "docs/examples/styles/content_align_all.py"
```
=== "content_align_all.css"
```css
--8<-- "docs/examples/styles/content_align_all.css"
```
=== "Output"
```{.textual path="docs/examples/styles/content_align_all.py"}
```
## CSS ## CSS
```sass ```sass
@@ -54,6 +81,11 @@ content-align: <HORIZONTAL> <VERTICAL>;
content-align: center middle; content-align: center middle;
/* Align content at the top right of a widget */ /* Align content at the top right of a widget */
content-align: right top; 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 ## Python
@@ -62,4 +94,9 @@ content-align: right top;
widget.styles.content_align = ("center", "middle") widget.styles.content_align = ("center", "middle")
# Align content at the top right of a widget # Align content at the top right of a widget
widget.styles.content_align = ("right", "top") 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"
``` ```