CSS align should align multiple widgets independantly

[aaronst]

Here is an example app to demonstrate the behavior I'm seeing.

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


class Test(App):
    """A test app."""

    CSS_PATH = "test.css"

    def compose(self) -> ComposeResult:
        """Create child widgets for the app."""

        yield Static("A test widget with a wider width.")
        yield Static("A narrower widget.")


Test().run()

Screen {
    align: center middle;
}

Static {
    background: $panel;
    margin: 1;
    padding: 1 2;
    width: auto;
}

Because I have align: center middle, I would expect both Static widgets to be centered on the vertical axis. Instead, it looks like the widest widget is centered, and the narrower widget is left aligned to it. Apologies if this is expected behavior, I am fairly new to CSS.

[willmcgugan]

That is the expect behaviour currently. It will align everything as one block. But I think it should work in the way you expected it to work.

[davep]

(while reviewing older issues) See also #1677. Closing both as expected behaviour (and possibly an extra way of doing this in the future).

[github-actions[bot]]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.