Button label not centered when buttons are in nested horizontals

[matkudela]

My example:

from __future__ import annotations

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


class MyApp(App):

    DEFAULT_CSS = """
    #main {
        width: auto;
        Button {
          width: 33%;
        }
    }
    #second {
      width: 3fr;
    }
    #third {
      width: 3fr;
    }
    #middle-one {
      margin: 0 1;
    }
    """
    def compose(self) -> ComposeResult:
        with Horizontal(id="main"):
            yield Horizontal(Static("One"), id="first")
            yield Horizontal(Static("Three"), id="second")
            with Horizontal(id="third"):
                yield Button("This", variant="success")
                yield Button("is", variant="primary", id="middle-one")
                yield Button("example1", variant="error")

MyApp().run()

Output (on 132x43 terminal, textual 0.76.0):

As you can see label of third button is not centered. This happens only in nested horizontals and number of characters of label has to be even.

Without nesting everything works fine:

from __future__ import annotations

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


class MyApp(App):

    DEFAULT_CSS = """
    #third {
      width: 100%;
      Button {
          width: 33%;
      }
      
    }
    #middle-one {
      margin: 0 1;
    }
    """
    def compose(self) -> ComposeResult:
            with Horizontal(id="third"):
                yield Button("This", variant="success")
                yield Button("is", variant="primary", id="middle-one")
                yield Button("example1", variant="error")

MyApp().run()

[github-actions]

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

• How do I center a widget in a screen?
• Why do some key combinations never make it to my app?

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

[willmcgugan]

It is centered as much as is possible in the terminal. Terminals are a grid of characters, and you can only position text on integer coordinates. You can't have the half a space to position it visually perfectly.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.