Posición de texto dentro <a> elemento

Question

Esto es lo que se ve mi código actual como:

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

Resultado:

---

En primer lugar, la columna que todo esto es envuelto en tiene un margin-bottom: 14px. Esto crea el espaciado de la columna y las dos líneas horizontales debajo de ella. Esto es así si el usuario quisiera sacar el botón todos juntos, el texto dentro de la columna aún se encontraría con 14px timido de las dos líneas a continuación.

Como puedes ver el texto para .button está alineado con la mitad usando la propiedad css padding y text-align: center. Hay un margin-top: 14px en el botón que da el mismo espacio por debajo del botón que debajo.

Sin embargo, lo que encuentro es que al usar el elemento padding para el texto dentro del botón, afecta la distancia (en este caso, el espacio debajo del botón que es 14px, ahora es más grande de lo que debería ser).

Pregunta:

¿Hay una manera de alinear verticalmente el texto dentro de la .button sin utilizar la propiedad padding como he tratado vertical-align, la posición del flotador y algunos otros pero sin éxito sin cambiar el espacio encima o debajo de la caja ... ¿cuál es la mejor manera de hacerlo y si es posible, una forma alternativa de simplemente usar una imagen?

Cualquier ayuda sería muy apreciada. http://jsfiddle.net/9xpfY/

Answer 1

Hay dos maneras de hacer esto, sin embargo sin javascript ambos de estos métodos requieren alturas absolutas aunque la segunda opción funciona en relación con el padding que haya establecido.

---

• La primera, una elección obvia es el uso de altura de la línea.

  Esto funciona estableciendo el alto de la línea de texto en un valor, y como el texto ya está alineado verticalmente de forma nativa con el centro de la línea-altura, obtienes el efecto que estás buscando.

  agregando la línea line-height : 27px; a .button { le dará el resultado deseado.

  jsfiddle

---

• La segunda manera es envolver el texto dentro del elemento en una etiqueta span y establezca la propiedad bottom a bottom: -6.75px;

  Su elemento de botón se vería

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

  y deberá añadir esta línea a su css:

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

  jsfiddle

Referencias

• line-height

• bottom

Answer 2

Desea utilizar el estilo "altura de línea" para especificar el alto de línea del texto dentro. Tenga en cuenta que esto también puede cambiar la altura del elemento en algunos casos (cuando la altura de la línea es mayor que la altura mínima del elemento, por ejemplo). Ver esto: http://jsfiddle.net/VvnhJ/

Answer 3

Conjunto line-height al mismo valor que el botón de height

Answer 4

Creo que una cosa que puede hacer es utilizar el atributo line-height. Trate de hacer esto:

.button{ 
    line-height : 27px; 
}