Vínculos que parezcan un botón

[curses]

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

[Mikmoro]

El vertical align no funciona para esto.

Debes probar a usar line-height, que es la altura de línea, con lo que puedes hacer que el texto se aleje de la parte superior y buscar la medida para simular el centrado vertical.

Tipo line-height: 22px;

Mikel.

[curses]

¡Sensacional, Mikel!

Ahora va perfecto.

¡Saludos y muchas gracias!

[Mikmoro]

De nada, es un placer.

Me alegro de que te haya funcionado.

Mikel.

[curses]

Bueno, abusando un poco más de vuestra amabilidad os planteo otra pregunta:
¿Es posible relacionar el ancho del botón con la longitud de los diferentes textos y no tener que hacer una clase para cada botón?

Gracias

[Mikmoro]

No entiendo bien la pregunta.

Mikel.

[curses]

Es decir, que si la palabra del botón es corta, el botón sea más corto y que si la palabra es más larga, el botón se adapte a esa palabra más larga, manteniendo en ambos casos un padding a derecha e izquierda.

[pateketrueke]

solo evita especificar el width de el CSS relacionado??

[Mikmoro]

Exactamente.

[curses]

He intentado hacer lo que me decís (eliminar la especificación de width) y lo que ocurre es que el botón se expande a todo el ancho de la página. De todas formas, mi petición ya era una cuestión menor y, en todo caso, aplicaré clases con anchos distintos según los necesite.

Gracias

[Raulmmmm]

Si aún buscas que se acorte, sácale el display: block y el width.