Text und Icons in der Mitte von Tabs

Seit ein paar Wochen bastele ich ein bisschen an meinem Firefox rum, bin also völliger Anfänger hier ...

Immerhin habe ich eine userChrome.css beisammen, und turne etwas in den Browser Werkzeugen herum, aber jetz habe ich ein kleines Problem .

Ich hätte gerne den Text und die Webseiten Icons in der Mitte der Tabs, schaffe es aber nur den Text zu zentrieren .

Die Icons bleiben links hängen , statt sich brav links neben dem Text anzureihen .

Der Code den ich für den Text benutze :

.tab-label-container {
-moz-box-pack: center !important;
-moz-box-orient: horizontal !important;
padding-top: 2px !important;
}
.tabbrowser-tab:not(:hover):not([pinned]) .tab-label-container {
margin-inline-end: 7px
}

Irgendwelche Ideen, wie ich die Icons neben den Text bekomme ?

Die Close Buttons und das Hoververhalten sollten allerdings bleiben wie sie sind, und nicht beeinflusst werden .

Danke vorab !

Ein freundlicher Poster auf Reddit hat die Lösung schon präsentiert, funktioniert prima .

Der Code dazu :

.tabbrowser-tab[selected]:not(:hover):not([pinned]) .tab-label-container,
#tabbrowser-tabs:not([closebuttons="activetab"])
.tabbrowser-tab:not(:hover):not([pinned]) .tab-label-container{
margin-inline-end: 7px
}


.tab-content:not([pinned])::before{
display: -moz-box;
content: "";
-moz-box-flex: 1;
}

Zu beachten ist , bei mir sind die Close Buttons im Tab rechts ( nur sichtbar bei hover ), daher wohl das margin von 7px .

Das hast du genau richtig erkannt .

Ich bin noch auf einem alten OSX ( High Sierra ), das für meine Safariversion keinen Support mehr hat, und weswegen der Browser so langsam in die Knie geht . Firefox supported noch High Sierra , Apple nicht ....

Seit ich kürzlich diese CSS Modifikationen entdeckt habe, und wie viel man bei FF überhaupt anpassen kann, ist Safari in der Tonne .

Nur das Design kann Apple halt gut, da wollte ich mir meine eigene Hobby-Version basteln .

Ob und wieso man High Sierra noch benutzt - um das zu verstehen muss man sich etwas mit Macs auskennen, und das geht vielleicht auch etwas am Thema vorbei .

Als kleines Hobby macht das Rummurksen mit diesem CSS Dingens jedenfalls Spass , und mein Spagetti Code funktioniert für meine bescheidenen Ansprüche soweit ganz gut .

Zitat von 2002Andreas

Aber Achtung, das kann süchtig machen

Zu spät !!!

Zitat von Mira_Belle

Ich war so frei und habe mir den nachfolgenden Codeschnipsel mal "ausgeborgt"!

CSS

.tab-content:not([pinned])::before{
    display: -moz-box;
    content: "";
    -moz-box-flex: 1;
}

Danke.

Ich hoffe es funktioniert ; der Dank geht aber an den Reddit User der ihn zur Verfügung gestellt hat .