Centrar texto vertical en enlaces con fondo y bordes

[kahlito]

Hola, estoy intentando hacer un menú con css y utilizando una clase como esta:

Código:

a.menu:link {
	text-decoration:none;
	font-size: 14px;
	color: #FFFFFF;
	font-weight: bold;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	background-color: #666633;
	display: block;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	padding-left: 10px;
	padding-right: 10px;
	}
a.menu:hover{
	text-decoration:none;
	font-size: 14px;
	color: #FFFFFF;
	font-weight: bold;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	background-color:#999933;
	display: block;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	height: auto;
	padding-left: 10px;
	padding-right: 10px;
}

Y luego los llamo así:

Código:

<a href="#" class="menu">Uno</a>
<a href="#" class="menu">Dos</a>
<a href="#" class="menu">Tres</a>

Hasta aqui todo bien sin embargo cuando lo utilizo con bordes (bien inferior o superior )los textos se quedan siempre pegado al inferior del borde bien por arriba o bien por abajo y lo que quiero es centrarlo:

Código:

a.menu:link {
	text-decoration:none;
	font-size: 14px;
	color: #FFFFFF;
	font-weight: bold;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	background-color: #666633;
	display: block;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	height: auto;
	padding-left: 10px;
	padding-right: 10px;
	}

No se si me explico bien lo que quiero es que aún aumentando la anchura el texto quede siempre en el centro tanto por arriba como por abajo.

He probado con padding y margin incluso pero siempre lo que hace es estirarlo todo y tengo que calcular mano para que quede en el centro, incluso en el bloque intentando darle un alineamiento vertical en el centro (vertical-align: middle;) pero tampoco

¿Puedo arreglarlo?

[josemi]

Hola,

No entiendo muy bien lo que necesitas, pero mira si te sirve line-height (http://www.w3.org/TR/CSS21/visudet.html#line-height).

Saludos.

[kahlito]

Hola josemi, gracias por tu respuesta y perdona que haya tardado en contestar

Lo del line-height: tambien lo habia probado al igual que el vertical-align: middle; y nada me seguia dando problemas hasta que me di cuenta que era por meter espacios <br> entre uno y otro lo que hacia que siempre estuviera pegado en el borde inferiorr.

Aquí dejo una pequeña captura de lo que me pasaba:



Y lo que queria exactamente era que los textos me saliesen justo en el centro vertical y no pegao al borde inferior como me pasaba antes.

Despues de quitarle los espacios le añadí relleno por arriba y relleno por abajo (padding-top: 10px; padding-bottom: 10px;) y listo ahora el texto se ha colocado en el centro por fin.



Saludosss