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

Rework text-align CSS reference.

Browse Source 
[skip ci]
This commit is contained in:
Rodrigo Girão Serrão
2023-01-05 18:35:21 +00:00
parent d27e13a49a
commit c65c691b5a
1 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
docs/styles/text_align.md
View File

@@ -1,28 +1,32 @@
# Text-align
The `text-align` rule aligns text within a widget.
The `text-align` rule sets the text alignment in a widget.
## Syntax
```
text-align: [left|start|center|right|end|justify];
```
--8<-- "docs/snippets/syntax_block_start.md"
text-align: <a href="../../css_types/text_align">&lt;text-align&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
The `text-align` rule accepts a value of the type [`<text-align>`](../css_types/text_align.md) that defines how text is aligned inside the widget.
### Values
| Value | Description |
|-----------|----------------------------------|
| `left` | Left aligns text in the widget |
| `start` | Left aligns text in the widget |
| `center` | Center aligns text in the widget |
| `right` | Right aligns text in the widget |
| `end` | Right aligns text in the widget |
| `justify` | Justifies text in the widget |
--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
@@ -35,18 +39,13 @@ This example shows, from top to bottom: `left`, `center`, `right`, and `justify`
--8<-- "docs/examples/styles/text_align.css"
```
=== "Output"
```{.textual path="docs/examples/styles/text_align.py"}
```
[//]: # (TODO: Add an example that shows how `start` and `end` change when RTL support is added.)
## CSS
```sass
/* Set text in all Widgets to be right aligned */
Widget {
text-align: right;
}
/* Set text in the widget to be right aligned */
text-align: right;
```
## Python