En una pequeña página que estoy preparando he dado un estilo a los botones de input mediante una pequeña imagen de fondo de 24x1 píxel que se repite horizontalmente para que simule un botón en relieve.
Ahora me gustaría hacer lo mismo con algunos vínculos <a>, pero no consigo centrar el texto verticalmente dentro de los márgenes del botón (me queda siempre alineado por arriba y no logro hacerlo bajar con un vertical-align). Os adjunto las dos clases css (la del input, que funciona bien y la del link, que no) a ver si alguien puede decirme qué es lo que no hago correctamente.
Saludos y gracias de antemano
Código:
input.groovybutton
{
font: bold 11px "Lucida Grande", arial, sans-serif;
color: #444;
height:24px;
background-color:#aaaaaa;
background-image:url(imagen-1.gif);
border-style:solid;
border-color:#aaaaaa;
border-width:1px;
padding-right:12px;
padding-left:12px;
}
Código:
a.groovy {
color: #444444;
font: bold 11px "Lucida Grande", Arial, sans-serif;
text-align: center;
background: #aaaaaa url(imagen-1.gif) repeat-x;
width: 112px;
height: 22px;
display: block;
border: 1px solid #aaaaaa;
text-decoration: none;
vertical-align: middle;
}