Foros del Web » Creando para Internet » CSS »

Centrar texto vertical en enlaces con fondo y bordes

Estas en el tema de Centrar texto vertical en enlaces con fondo y bordes en el foro de CSS en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 03/11/2004, 07:45
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Centrar texto vertical en enlaces con fondo y bordes

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?
  #2 (permalink)  
Antiguo 03/11/2004, 13:01
Ex Colaborador
 
Fecha de Ingreso: junio-2002
Mensajes: 9.091
Antigüedad: 15 años, 5 meses
Puntos: 16
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.
__________________
Josemi

Aprendiz de mucho, maestro de poco.
  #3 (permalink)  
Antiguo 04/11/2004, 09:54
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:38.