Textposition innerhalb <a> Element

Question

Dies ist, was meine aktuellen Code wie folgt aussieht:

HTML:

<a class="button" href="#">Read More</a> 

CSS:

.button { 
background:url('../images/btn_bg.jpg') repeat scroll 0% 0%; 
font: 12px Helvetica, Arial, sans-serif; 
color: #FFF; 
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); 
text-transform: uppercase; 
text-align: center; 
text-decoration: none; 

cursor: pointer; 
border: none; 

min-width: 87px; 
min-height: 29px; 

float: right; 
margin-top: 14px; 

padding-top: 4.25px; 

transition: all 0.5s ease 0s; 
-webkit-transition: all 0.5s ease 0s; 
-moz-transition: all 0.5s ease 0s; 
-o-transition: all 0.5s ease 0s; 
} 

.button:hover { 
background: url('../images/btn_over.jpg') repeat scroll 0% 0%; 
} 

Ergebnis:

---

Erstens ist die Spalte, dass dies alles in eingewickelt wird, hat eine 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 die .button mit der css padding Eigenschaft und text-align: center zur Mitte ausgerichtet. Auf der Schaltfläche befindet sich eine margin-top: 14px, die den gleichen Abstand über der Schaltfläche wie unter gibt.

Was ich jedoch finde, ist, dass durch die Verwendung des padding Elements für den Text innerhalb der Schaltfläche, es die Entfernung um es beeinflusst (in diesem Fall ist der Raum unterhalb der Taste, die 14px sein soll, jetzt größer als was es sein sollte).

Frage:

Gibt es eine Möglichkeit, um vertikal den Text innerhalb des .button ausrichten, ohne die Eigenschaft padding zu verwenden, wie ich vertical-align versucht haben, Position, Schwimmer und ein paar andere, aber ohne Erfolg ohne Änderung der Raum über oder unter der Box ... 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 würde sehr geschätzt werden. http://jsfiddle.net/9xpfY/

Answer 1

Es gibt zwei Möglichkeiten, wie Sie dies tun können, aber ohne Javascript beiden Methoden absolute Höhen erfordern, obwohl die zweite Option, um die relative arbeitet padding Sie gesetzt haben.

---

• Die erste, eine offensichtliche Wahl ist die Verwendung von Linienhöhe.

  Dies funktioniert durch Festlegen der Höhe der Textzeile auf einen Wert, und da Text bereits nativ vertikal auf die Mitte der Zeilenhöhe ausgerichtet ist, erhalten Sie den gewünschten Effekt.

  Hinzufügen der Zeile line-height : 27px; zu .button { wird Ihnen das gewünschte Ergebnis geben.

  jsfiddle

---

• Die zweite Möglichkeit ist, den Text innerhalb des Elements in einem span-Tag und stellen Sie die bottom Eigenschaft bottom: -6.75px;

  Ihr Knopfelement wickeln würde so aussehen dies

  und Sie würden diese Zeile in die CSS hinzufügen:

  #buttontext {position: relative; bottom: -6.75px;}

  jsfiddle

BEZUG

• line-height

• bottom

Answer 2

Sie möchten "line-height" -Stil verwenden, um die Zeilenhöhe des Texts anzugeben. Beachten Sie, dass dies in einigen Fällen auch die Höhe des Elements ändern kann (wenn z. B. die Zeilenhöhe größer als die Mindesthöhe des Elements ist). Siehe dazu: http://jsfiddle.net/VvnhJ/

Answer 3

Set line-height auf den gleichen Wert wie die Schaltfläche height

Answer 4

Ich denke, eine Sache, die Sie tun können, ist line-height-Attribut zu verwenden. Probieren Sie dies aus:

.button{ 
    line-height : 27px; 
}