Textposition innerhalb eines Elements

So sieht mein aktueller Code aus:

HTML:

CSS:

Ergebnis :

Erstens, die Spalte, in die alles eingepackt ist, hat margin-bottom: 14px . Dies erzeugt den Abstand von der Spalte und den zwei horizontalen Linien darunter. Dies ist so, wenn der Benutzer den Knopf alle zusammen herausnehmen wollte, würde der Text innerhalb der Spalte immer noch 14 px schüchtern von den zwei Zeilen darunter treffen.

Wie Sie sehen können, ist der Text für .button mit der css padding Eigenschaft und text-align: center auf die Mitte ausgerichtet. Es gibt eine margin-top: 14px auf der Schaltfläche, die den gleichen Abstand über der Schaltfläche wie unter gibt.

Ich finde jedoch, dass durch die Verwendung des padding -Elements für den Text innerhalb der Schaltfläche die Entfernung um diese herum beeinflusst wird (in diesem Fall ist jetzt der Abstand unter der Schaltfläche, der 14px sein soll) größer als was es sein sollte).

Frage:

Gibt es eine Möglichkeit, den Text innerhalb von .button vertikal auszurichten, ohne die padding -Eigenschaft zu verwenden, da ich versucht habe, vertikal ausrichten, positionieren, floaten und ein paar andere, aber keinen Erfolg, ohne den Abstand über oder unter dem Feld zu ändern ... was ist der beste Weg, um dies zu tun und wenn möglich, eine alternative Möglichkeit, nur ein Bild stattdessen zu verwenden?

Jede Hilfe wird sehr geschätzt. Ссылка