mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
Add a FAQ about aligning things in the middle of a container
This commit is contained in:
34
questions/align-center-middle.question.md
Normal file
34
questions/align-center-middle.question.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: "How do I center a widget in a screen?"
|
||||
alt_titles:
|
||||
- "centre a widget"
|
||||
- "center a control"
|
||||
- "centre a control"
|
||||
---
|
||||
|
||||
To center a widget within a container use
|
||||
[`align`](https://textual.textualize.io/styles/align/). But remember that
|
||||
`align` works on the *children* of a container, it isn't something you use
|
||||
on the child you want centered.
|
||||
|
||||
For example, here's an app that shows a `Button` in the middle of a
|
||||
`Screen`:
|
||||
|
||||
```python
|
||||
from textual.app import App, ComposeResult
|
||||
from textual.widgets import Button
|
||||
|
||||
class ButtonApp(App):
|
||||
|
||||
CSS = """
|
||||
Screen {
|
||||
align: center middle;
|
||||
}
|
||||
"""
|
||||
|
||||
def compose(self) -> ComposeResult:
|
||||
yield Button("PUSH ME!")
|
||||
|
||||
if __name__ == "__main__":
|
||||
ButtonApp().run()
|
||||
```
|
||||
Reference in New Issue
Block a user