---
title: "💭 Center things - Textual"
description: "!https://textual.textualize.io/how-to/center-things/"
date: 2023-07-30
published: true
tags:
  - python
  - textual
  - tui
  - thought
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="http://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()
```

!!! note

    This post is a <a href="/thoughts/" class="wikilink" data-title="Thoughts" data-description="These are generally my thoughts on a web page or some sort of url, except a rare few don&#39;t have a link. These are dual published off of my..." data-date="2024-04-01">thought</a>. It's a short note that I make
    about someone else's content online <a href="/tags/thoughts/" class="hashtag-tag" data-tag="thoughts" data-count=2 data-reading-time=3 data-reading-time-text="3 minutes">#thoughts</a>
