Den Button-Text zentrieren

Warum ist Ihr Button-Text nicht zentriert?

Wenn Sie bemerkt haben, dass Ihr Button-Text erscheint außermittig oder falsch ausgerichtet, kann dies an den Größeneinstellungen oder einer zusätzlichen Polsterung der Schaltfläche liegen. Häufige Ursachen sind:

• Geänderte Größeneinstellungen: Das Anpassen der Breite und Höhe der Schaltfläche kann manchmal Auswirkungen auf die Zentrierung des Textes haben.
• Zusätzliche Polsterung: Eine ungleichmäßige Polsterung innerhalb der Schaltfläche kann dazu führen, dass der Text aus der Mitte verschoben wird.
• Ausrichtungseinstellungen: Wenn die vertikale Ausrichtung nicht richtig eingestellt ist, kann die Schaltflächenbeschriftung etwas höher oder niedriger als erwartet aussehen.

Wie zentriere ich den Button-Text in GemPages?

Befolgen Sie diese Schritte, um den Text in der Mitte Ihrer Schaltfläche auszurichten und sicherzustellen, dass Ihre Schaltflächen professionell aussehen.

#1. Polsterung zurücksetzen oder anpassen

Schritt 1: Klicken Sie im Editor auf das Schaltflächenelement um das Einstellungsfenster zu öffnen.

Schritt 2: Suchen Sie den Polsterung unter dem Größe .

Schritt 3: Wenn die Polsterung ungleichmäßig ist, passen Sie sie so an, dass der Abstand auf allen Seiten gleich ist. Dadurch wird der Text innerhalb der Schaltfläche neu ausgerichtet.

#2. Überprüfen Sie die Breite und Höhe der Schaltfläche

Schritt 1: Gehen Sie zur Größe zu üben.

Schritt 2: Stellen Sie sicher, dass die Höhe der Schaltfläche im Verhältnis zu ihrer Breite steht, sodass der Text in der Mitte bleibt.

#3. Benutzerdefinierten Code verwenden

Wenn der Button-Text durch die Anpassung von Abstand und Größe nicht vollständig zentriert wird, fügen Sie eine kleine benutzerdefinierte CSS-Regel hinzu. Dadurch erhalten Sie eine pixelgenaue horizontale und vertikale Ausrichtung.

Schritt 1: Klicken Sie mit der rechten Maustaste auf das Schaltflächenelement und wählen Sie Benutzerdefinierter Code.

Schritt 2: Kopieren Sie im Code-Editor den folgenden Code und fügen Sie ihn in das Feld unter dem Registerkarte „CSS“.

 display: flex;

  align-items: center;

  justify-content: center;

Schritt 3: Speichern Sie die Updates und überprüfen Sie das Ergebnis.