Foros del Web » Creando para Internet » CSS »

centrar texto en una capa

Estas en el tema de centrar texto en una capa en el foro de CSS en Foros del Web. Buenos dias, alguno de ustedes sabe como centrar en una capa un texto, mi codigo es: Código: #sesSion{ width:100%; height:20px; text-align:right; background-color:#FED966; } lo que ...
  #1 (permalink)  
Antiguo 11/01/2006, 07:23
 
Fecha de Ingreso: abril-2005
Ubicación: Santiago Compostela
Mensajes: 213
Antigüedad: 12 años, 7 meses
Puntos: 0
centrar texto en una capa

Buenos dias, alguno de ustedes sabe como centrar en una capa un texto, mi codigo es:

Código:
#sesSion{
	width:100%;
	height:20px;
	text-align:right;
	background-color:#FED966;
}
lo que sucede es que me lo alinea bien a la derecha, pero me sale pegado a la parte superior de la capa, y yo quiero que salga colocado en el medio y a la derecha.
Alguno sabe como se puede hacer esto.
un saludo
  #2 (permalink)  
Antiguo 11/01/2006, 10:06
Avatar de KarQ  
Fecha de Ingreso: septiembre-2005
Mensajes: 88
Antigüedad: 12 años, 3 meses
Puntos: 1
De acuerdo

Prueba a agregarle la propiedad vertical-align pero no olvides que esta propiedad solo se aplica a elementos a nivel de línea o celdas de tabla, por lo que tendrás que añadir un display. Quedaría algo así:

Código:
#sesSion{
        display: table-cell;
        vertical-align: middle;
	width:100%;
	height:20px;
	text-align:right;
	background-color:#FED966;
}
Te he puesto el valor table-cell en el display porque si le ponemos un inline puede que tengas problemas con el width y el height. De todas formas puedes probarlo.

Un saludo.
__________________
KarQ - xC
mi weblog en: http://www.monochromatic.es
  #3 (permalink)  
Antiguo 11/01/2006, 11:13
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Si no te funciona eso, siempre puedes añadirle un padding-top: loquetevengabien px;
Lo digo porque como veo que la capa tiene ya definido un height...

Pero es mejor lo que te dicen arriba.
  #4 (permalink)  
Antiguo 12/01/2006, 02:44
 
Fecha de Ingreso: abril-2005
Ubicación: Santiago Compostela
Mensajes: 213
Antigüedad: 12 años, 7 meses
Puntos: 0
Gracias por contestar, aun me sigue sucediendo lo mismo, mi codigo CSS es:

Código:
#sesion{	
	display:inline-table;
    vertical-align: middle;
	width:100%;
	height:20px;	
	background-color:#FED966;
	text-align:right;
}
y el codigo html es:

Código:
(...)
<body>
<div id="contenedor">
	<div id="cabecera"><img src="/ReWeb/imagenes/logo.jpg" border="0"></div>
		<div id="sesion">
			<a href="#"> Cerrar Sesión &nbsp&nbsp&nbsp&nbsp </a>
		</div>
	<div id="navegador">
	</div>	
</div>
</body>
(...)
En firefox me sale una cosa rara, me lo centra en la capa pero la capa tiene el ancho del texto.

un saludo
  #5 (permalink)  
Antiguo 12/01/2006, 09:09
Avatar de KarQ  
Fecha de Ingreso: septiembre-2005
Mensajes: 88
Antigüedad: 12 años, 3 meses
Puntos: 1
Yo creo que lo mejor que puedes hacer es lo siguiente:

lo dejas todo igual (pero recuerda corregir los &nbsp que deben acabar en punto y coma)

pero añades una propiedad más a los enlaces y ya que el alto es un valor fijo le añades un padding-top al enlace. Te quedaría algo así.

Código:
#sesion{
	width:100%;
	height:30px;
    vertical-align: middle;
	background-color:#FED966;
	text-align:right;
}

#sesion a {
display: block; /*un display block es necesario para que el navegador te aplique el padding*/
padding-top: 10px; /*he puesto 10 pero ponle cuanto necesites*/
}
siendo el height un valor fijo aplícale el padding para que quede más o menos centrado, esto no es centrar exactamente, pero creo que puede ser una solución mejor que complicarte la vida con el vertical-align ya que solo se aplica en celdas de tabla (y elementos de línea, pero en tu caso no te servirá).

Espero que te sirva, que para una cosa tan aparentemente sencilla la que estamos liando xDDDDDDD.

Un saludo
__________________
KarQ - xC
mi weblog en: http://www.monochromatic.es
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:20.