Posizione testo all'interno <a> elemento

Question

Questo è ciò che il mio codice attuale assomiglia:

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%; 
} 

Risultato:

0.123.516,41 mila

---

In primo luogo, la colonna che tutto questo è avvolto in ha un margin-bottom: 14px. Questo crea la spaziatura dalla colonna e le due linee orizzontali sotto di essa. Questo è così se l'utente volesse estrarre il pulsante tutti insieme, il testo all'interno della colonna si incontrerebbe ancora a 14px timido dalle due righe sottostanti.

Come si può vedere il testo per .button è allineato al centro utilizzando la proprietà css padding e text-align: center. C'è un margin-top: 14px sul pulsante che dà la stessa spaziatura sopra il pulsante come sotto.

Tuttavia, quello che sto trovando è che usando l'elemento padding per il testo all'interno del pulsante, questo influenza la distanza intorno ad esso (in questo caso, lo spazio sotto il pulsante che è pensato per essere 14px, è ora più grande di quello che dovrebbe essere).

Domanda:

C'è un modo per allineare verticalmente il testo all'interno della .button senza utilizzare la proprietà padding come ho cercato vertical-align, la posizione flottante e pochi altri, ma senza alcun successo senza cambiare lo spazio sopra o sotto la scatola ... qual è il modo migliore per farlo e se possibile, un modo alternativo di usare semplicemente un'immagine?

Qualsiasi aiuto sarebbe molto apprezzato. http://jsfiddle.net/9xpfY/

Answer 1

Ci sono due modi per fare questo, però, senza javascript entrambi questi metodi richiedono altezze assolute anche se la seconda opzione funziona relativo al padding è stata impostata.

---

• La prima, una scelta ovvia è l'uso di altezza della linea.

  Questo funziona impostando l'altezza della linea di testo su un valore, e poiché il testo è già allineato verticalmente al centro dell'altezza della linea, si ottiene l'effetto che si sta cercando.

  aggiungendo la riga line-height : 27px; a .button { darà il risultato desiderato.

  jsfiddle

---

• Il secondo modo è quello di avvolgere il testo all'interno dell'elemento in un tag span e impostare la proprietà bottom a bottom: -6.75px;

  tuo elemento pulsante assomiglierebbe questo

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

  e si dovrebbe aggiungere questa linea al vostro CSS:

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

  jsfiddle

RIFERIMENTI

• line-height

• bottom

Answer 2

Si desidera utilizzare lo stile "altezza della riga" per specificare l'altezza della linea del testo all'interno. Tieni presente che in alcuni casi anche l'altezza dell'elemento può cambiare (quando l'altezza della linea è maggiore dell'altezza minima dell'elemento, ad esempio). Vedere questo: http://jsfiddle.net/VvnhJ/

Answer 3

Set line-height per lo stesso valore del pulsante height

Answer 4

Penso che una cosa che si può fare è quella di utilizzare l'attributo line-height. Prova questo:

.button{ 
    line-height : 27px; 
}