Text und Icon im Button zentriert darstellen

[inno]

Hallo Tommy,

es geht um das Theme BistroM5 Header Block.
Hier werden leider Text und Icon im Button nicht zentriert dargestellt (siehe Screen), also gleicher Abstand oben und unten im Button. Screen anbei. Kann man das anpassen?
Das Shoppinbag hat sitzt auch nicht zentriert.

Das gleich Problem habe ich im Featuresblock Theme BistroM5.
Screenshot anbei.
Weisst du hier Abhilfe?

[Tommy Herrmann]

Grundsätzlich hat das etwas mit der "line-height" der verwendeten Schrift zu tun. Alle Icons von Mobirise kannst Du pixelgenau im Icon-Editor der Schriftgröße, die Du verwendest, anpassen.

Versuche das mal, vielleicht bringt das schon den Erfolg.

[inno]

hab ich schon versucht, aber ohne Erfolg. Weisst du evtl. wo ich da ansetzen muss?

[inno]

Es geht um die Ausrichtung oben und unten! Es sollte zentriert im Button sein, das ICON und der Text.

[Tommy Herrmann]

... also, wenn ich das Icon z.B. auf 14px stelle, dann ist das doch sehr mittig und sieht ordentlich aus:

... ansonsten wüsste ich da gerade auch keinen Rat.

[inno]

... ich weiss! Aber das ICON Soll auf gross dargestellt werden. Ca. 30
Das andere Problem ist der Button im Header.

[Tommy Herrmann]

Du könntest auch versuchen der Schrift, also hier dem <a> Tag </a> ein "padding" zu geben und die Schrift so pixelgenau in der Höhe an das Icon (hier 30px hoch) anpassen. Hier mal mit einem <span> Bereich </span>, dem ich einen Abstand von oben in Höhe von 10px gegeben habe:

<span style="padding-top: 10px;">ADD TO CART</span>

<div mbr-buttons mbr-theme-style="display-4" data-toolbar="-mbrBtnMove,-btnAdd" class="mbr-section-btn" mbr-if="showButtons"><a class="btn btn-lg btn-white" href="#" data-app-placeholder="Type Text"><span class="mobi-mbri mobi-mbri-shopping-bag mbr-iconfont mbr-iconfont-btn" style="font-size: 30px;"></span><span style="padding-top: 10px;">ADD TO CART</span></a></div>

[Tommy Herrmann]

Das andere Problem ist der Button im Header.

... ich weiß nicht welchen Button von welchem Block Du meinst.

[inno]

Lösung: im Button muss "Text" zugeordnet sein, dann ist er mittig, "Menu"-Grösse nicht!

[Tommy Herrmann]

na dann hast Du ja Deine Lösung ...

... allerdings sieht das bei mir dann auch nicht mittiger aus

Ich meinte ja anfangs schon, dass das mit der "line-height" zu tun hat. Das Thema "BistroM5" hat extrem hohe Abstände zwischen den Schriftzeilen.

"Text" z.B. ca. 1.5

"Menu" nur 1

Das könntest Du auch dort am "Pinsel" (globale CSS) auch selbst anpassen/ändern :

[inno]

... wenn ich das letter-spacing bei "ADD TO CARD" erhöhen möchte! Wo füge ich was ein?

[Tommy Herrmann]

Da das ja ein Link - also ein <a> Tag </a> (Anchor = Anker) ist, dann an diesem Tag.

Du könntest also auch gleich in diesen Block in den "Code Editor" im Bereich "CSS Editor" schreiben:

Code: Alles auswählen

a {
  letter-spacing: 3px;
}

Dann gilt das natürlich für alle Links in diesem Block.

[inno]

Klasse funktioniert!!