centrar texto en una capa

acrego · #1 (**permalink**) 11/01/2006, 07:23

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

KarQ · #2 (**permalink**) 11/01/2006, 10:06

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.

kazafun · #3 (**permalink**) 11/01/2006, 11: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.

acrego · #4 (**permalink**) 12/01/2006, 02:44

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

KarQ · #5 (**permalink**) 12/01/2006, 09:09

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