Skip to content

Content-align

The content-align style aligns 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

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


class ContentAlignApp(App):
    def compose(self):
        yield Static("With [i]content-align[/] you can...", id="box1")
        yield Static("...[b]Easily align content[/]...", id="box2")
        yield Static("...Horizontally [i]and[/] vertically!", id="box3")


app = ContentAlignApp(css_path="content_align.css")
#box1 {
    content-align: left top;
    background: red;
}

#box2 {
    content-align: center middle;
    background: green;
}

#box3 {
    content-align: right bottom;
    background: blue;
}

Static {
    height: 1fr;
    padding: 1;
    color: white;
}

ContentAlignApp With content-align you can... ...Easily align content... ...Horizontally and vertically!

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