Unmittigkeit von Buttongrafik, teils gewünscht, teils nicht.

Du benötigst Hilfe bezüglich Firefox? Bitte stelle deine Frage im öffentlichen Bereich des Forums und nicht per Konversation an wahllos ausgesuchte Benutzer. Wähle dazu einen passenden Forenbereich, zum Beispiel „Probleme auf Websites“ oder „Erweiterungen und Themes“ und klicke dann rechts oben auf die Schaltfläche „Neues Thema“.
  • Firefox-Version
    83
    Betriebssystem
    Ubuntu-Mate

    Hallo,

    mittels

    Code
    #nav-bar .toolbarbutton-badge-stack { width: 50px !important }

    habe ich einige Buttons verbreitert. Überraschend sind die Grafiken nun unmittig.
    Bei drei Buttons ist mir das nur recht, so entsteht Platz für die zusätzlich angezeigten Werte.

    Die Grafiken der beiden rechten Buttons würde ich jedoch gern mittig plazieren.

    Weiß jemand, wie das gehen könnte?

    Beste Grüße

    Uwe

  • uwe_p

    Hat den Titel des Themas von „Unmittigkeit von Buttongrafik, teils gewünscht , teils nicht.“ zu „Unmittigkeit von Buttongrafik, teils gewünscht, teils nicht.“ geändert.
  • Überraschend sind die Grafiken nun unmittig.


    Eigentlich ist das gar nicht überraschend, wenn du bedenkst, dass in CSS standardmäßig alles links ausgerichtet ist - außer es gibt eine Regel, um einen Inhalt zentriert oder rechts auszurichten, was in diesem Fall aber nicht zutreffend ist. Insofern hast du natürlich eine große Lücke rechts, wenn du nur die Breite vom Element vergrößerst.



    Du kannst den Inhalt mit nur einer zusätzlichen Zeile horizontal zentrieren:


    CSS
    #nav-bar .toolbarbutton-badge-stack {
        justify-content: center !important;
    }


    Alternativ kannst du auch nur das Symbol mittig platzieren, das lässt den ggfs. vorhandenen Badge von Erweiterungen rechts oben unberührt. Dazu musst die Änderung von gerade weglassen und Folgendes ergänzen:



    CSS
    #nav-bar .toolbarbutton-badge-stack > image {
      margin-left: auto !important;
      margin-right: auto !important;
    }
  • Besten Dank für die Erläuterungen,

    mit

    Code
    #PanelUI-menu-button .toolbarbutton-badge-stack, #downloads-button .toolbarbutton-badge-stack { 
        justify-content: center !important}

    habe ich die beiden mittig gewünschten Grafiken nun zentriert.

    Interessant: Der Inhalt anderer verbreiterter Buttons ist offenbar standardmäßig zentriert:

    Freundliche Grüße

    Uwe