---
title: "Center things - Textual"
description: "!https://textual.textualize.io/how-to/center-things/"
date: 2023-07-30
published: true
tags:
  - cli
  - python
  - textual
  - thought
  - tui
template: link
---


<div class="embed-card embed-card-external">
  <a href="https://textual.textualize.io/how-to/center-things/" class="embed-card-link" target="_blank" rel="noopener noreferrer">
    <div class="embed-card-image">
      <img src="https://raw.githubusercontent.com/Textualize/textual/main/imgs/textual.png" alt="Textual - Center things — Textual is a TUI framework for Python, inspired by modern web development." loading="lazy">
    </div>
    <div class="embed-card-content">
      <div class="embed-card-title">Textual - Center things</div>
      <div class="embed-card-description">Textual is a TUI framework for Python, inspired by modern web development.</div>
      <div class="embed-card-meta">Textual Documentation &middot; textual.textualize.io</div>
    </div>
  </a>
</div>


How to center things in textual. Textual has a very unique way of styling text user interfaces for the terminal using css.  If you know css it feels natural.

<a href="https://willmcgugan.github.io" class="mention" data-name="Will McGugan" data-bio="Will McGugan’s essays" data-avatar="https://willmcgugan.github.io/images/will2025.jpeg" data-handle="@willmcgugan">@willmcgugan</a>, has put together a great article on how to center things in textual

here the final result


``` python
from textual.app import App, ComposeResult
from textual.widgets import Static

QUOTE = "Could not find you in Seattle and no terminal is in operation at your classified address."


class CenterApp(App):
    """How to center things."""

    CSS = """
    Screen {
        align: center middle;
    }

    #hello {
        background: blue 50%;
        border: wide white;
        width: 40;
        height: 9;
        text-align: center;
        content-align: center middle;
    }
    """

    def compose(self) -> ComposeResult:
        yield Static(QUOTE, id="hello")


if __name__ == "__main__":
    app = CenterApp()
    app.run()
```
