How to center TabbedContent

[leonardig08]

Hi, i am trying to center TabbedContent to have the Tabs at the center of the screen, is there a way to do this?

[github-actions[bot]]

We found the following entries in the FAQ which you may find helpful:

• How do I center a widget in a screen?
• Does Textual support images?
• Why doesn't the DataTable scroll programmatically?

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This is an automated reply, generated by FAQtory

[TomJGooding]

I think adding something like this in your CSS should work:

from textual.app import App, ComposeResult
from textual.widgets import Static, TabbedContent


class ExampleApp(App):
    CSS = """
    TabbedContent {
        & > ContentTabs {
            #tabs-list {
                align-horizontal: center;
            }
        }
    }
    """

    def compose(self) -> ComposeResult:
        with TabbedContent("Foo", "Bar", "Baz"):
            yield Static("Foo")
            yield Static("Bar")
            yield Static("Baz")


if __name__ == "__main__":
    app = ExampleApp()
    app.run()

[leonardig08]

It works, thanks a lot