How to center all widgets of different widths?

[TomJGooding]

I'm sorry for asking for some help yet again, especially when this seems so basic...

I have read the FAQ to center a widget, the Layout Guide, and the Align Reference but obviously I am still missing something.

The minimal code below is based on the example in the FAQ - how would you horizontally center both the Label text and the Button?

I understand I could wrap the button inside another Container and set the widths and alignments, but I assume there is a better way as this would be a bit cumbersome with an app containing multiple widgets?

Thanks again for any advice,

from textual.app import App, ComposeResult
from textual.widgets import Button, Label


class CenteredApp(App):
    CSS = """
    Screen {
        align: center middle;
    }
    """

    def compose(self) -> ComposeResult:
        yield Label("I would like both this text and the button to be centered")
        yield Button("PUSH ME!")


if __name__ == "__main__":
    CenteredApp().run()

[davep]

You my find this discussion handy here. Long story short, I'd do it like this:

from textual.app import App, ComposeResult
from textual.widgets import Button, Label
from textual.containers import Horizontal

class CenteredApp(App):
    CSS = """
    Screen {
        align: center middle;
    }

    Horizontal {
        align: center middle;
        height: auto;
    }
    """

    def compose(self) -> ComposeResult:
        yield Horizontal(Label("I would like both this text and the button to be centered"))
        yield Horizontal(Button("PUSH ME!"))


if __name__ == "__main__":
    CenteredApp().run()

[TomJGooding]

Thanks again Dave for your help. Sorry I really thought I had searched pretty thoroughly before posting, but I must have missed this discussion or not scrolled down far enough.

at the moment, when Textual is asked to centre-align a collection of items in the container it, in effect, left-aligns the items themselves (amongst themselves) and then centres the resulting collection within the container. [...] I seem to recall we had a chat about this internally a wee while back and decided this.... wasn't ideal and it should probably change

I thought this might be how the center alignment worked, but again wasn't sure if I was doing something wrong as wrapping all widgets inside a container seemed a bit awkward.

Could I suggest that this additional info is included somewhere in the FAQ or the docs? Unless this is on the roadmap to change in the near future? Currently the workings of center alignment feel a little misleading unless you find this discussion (which I apparently missed)

[davep]

No apologies needed, not exactly easy to find. And, you're right, at this point I feel it does deserve an entry in the FAQ. 🙂

[TomJGooding]

Thanks Dave, I'm happy to contribute something if it helps at all? I'd like to give something back after all the help I've been offered here, but I don't want my PR to be more of a hindrance than a help.