Skip to content

Align

The align style aligns children within a container.

Syntax

align: <HORIZONTAL> <VERTICAL>;
align-horizontal: <HORIZONTAL>;
align-vertical: <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

from textual.app import App
from textual.widgets import Static


class AlignApp(App):
    def compose(self):
        yield Static("Vertical alignment with [b]Textual[/]", classes="box")
        yield Static("Take note, browsers.", classes="box")


app = AlignApp(css_path="align.css")
Screen {
    align: center middle;
}

.box {
    width: 40;
    height: 5;
    margin: 1;
    padding: 1;
    background: green;
    color: white 90%;
    border: heavy white;
}

AlignApp ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ Vertical alignment with Textual ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ Take note, browsers. ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

CSS

/* Align child widgets to the center. */
align: center middle;
/* Align child widget to th top right */
align: right top;

Python

# Align child widgets to the center
widget.styles.align = ("center", "middle")
# Align child widgets to the top right
widget.styles.align = ("right", "top")