mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00

Files

darrenburns fec73ba0e1 Docs content align (#700 )

* Docs for content-align, some bug fixes for it too

* Make the example output a little clearer

* Remove app.run() from content-align docs example

* Improve wording

* Move content-align and scrollbar-gutter docs exmaples to split css/py files

* Remove app.run() from scrollbar-gutter docs example

2022-08-19 15:35:31 +01:00

1.7 KiB

Raw Blame History

Content-align

The content-align property allows you to align content inside a widget.

You can specify the alignment of content on both the horizontal and vertical axes.

Syntax

content-align: <HORIZONTAL> <VERTICAL>;

Values

`HORIZONTAL`

Value	Description
`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`

Value	Description
`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

Example

=== "content_align.py"

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

=== "content_align.css"

```scss
--8<-- "docs/examples/styles/content_align.css"
```

=== "Output"

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

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;

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")

1.7 KiB Raw Blame History