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?
