como centrar texto en capa div

hola, quiero saber como centrar verticalmente mediante css un titulo H1 en una capa DIV, supongo que no me vale ninguna propiedad que sea absoluta, ya que el ancho de la capa div es variable (%).
salu2 y gracias

ps: ya se cambiar las propiedades de H1 desde css, lo que necesito es la propiedad que me permite alinear en el medio de la capa div (como text-align:center, pero verticalmente)

yo los css no los uso asi que no tengo mucha idea. he estado mirando por google y he encontrado esto a ver si te sirve.

div#centrado {
margin-top:-100px;
top:50%;
}

prueba alguno de estos parametros

pues ya he conseguido saberlo
line-height:150%;

Guau, que cosa más rara... voy a probarlo a ver.

Por cierto, si funciona, asegurate de que también se ve como quieres en otros navegadores (Explorer, Opera, Navigator, Firefox....)

A mi no me sale como tu propones Solidaria. Quizás funcione en una web concreta, con otros parámetros, pero así sin más no lo centra.

Probad esto otro a ver que os sale:

#catalina h1 { margin: 5% 0 5% 0 ; }

Si el H1 está dentro de otro DIV, ponedle ese nombre en lugar de Catalina. Esto parece que deja un margen del 5% por arriba y por debajo del H1 y al final queda centrado. Si se os agranda demasiado la altura del DIV, probad a ponerle valores menores de 5 hasta conseguir la altura que querais.

Al menos en Explorer y en Opera se ve bien.

Decidme algo!

Hola,
Enhorabuena por la lección de las capas, se entiende muy bien. He intentado centrar verticalmente un texto dentro de una capa y la verdad es que es demasiado difícil para lo que es. He estado googleando y me da la impresión que no está muy claro la mejor forma de hacerlo.
Unos decían que si pones display: table-cell, la capa adquiere propiedades de celda y puedes aplicarle vertical-align. Pero no me ha funcionado
Lo único que probando ha funcionado ha sido lo que ha dicho Solidaria. Mi div era una barra y tenía una altura (height) de 40px y he puesto lo siguiente:
line-height: 41px; ¡Y funcionaba!
Lo que ha dicho Jorgens en Firefox parece que no funciona.
Yo además de éste tengo otro problema y es que no se centrar la capa que engloba a todas. He utilizado text-align pero no funciona ¿Cómo se hace?
Muchas gracias por adelantado.
Un Saludo

Te refieres a centrarla horizontalmente? Si es así se hace de este modo:

En la Hoja de Estilo ponle a BODY esto

BODY { lo-que-ya-tengas..... ;TEXT-ALIGN:center; }

Y al DIV que quieres centrar esto otro:

.............. ; MARGIN:0px auto 0px auto ; WIDTH:XXXXpx}
(XXXX es la anchura que deseas darle, es obligado definirla en este caso para que funcione el centrado)

Si tienes un DIV que engloba todo el contenido, ponselo a ese y todo queda centrado.

La única salvedad, es que como ahora todo queda centrado, si algún div lo quieres con alineación a la izquierda, derecha o justificado, has de ponerle TEXT-ALIGN:left (o right o justify) al que quieras cambiar.

También es muy importante definirle un ancho al DIV en el que pongas el MARGIN que te he comentado arriba. Si no seguramente no funcione en todos los navegadores.

Creo que así se queda centrado en cualquier navegador, pero avisarme si estoy equivocado.

Un saludo y perdón si os he confundido. No se de todo :oops: je je je.

Gracias Jorgens eso me funciona bien.
Lo que no consigo es alinear el texto verticalmente, la forma que antes dijiste no me funciona. Con lo fácil que era con las tablas.
Un saludo

Antes de leer este tema, estuve probando con vertical-align y solo consegui que me centrara cajas y botones, lo de line-height es lo que mejor me ha funcionado pero claro hay q ir cambiando el porcentaje por q no es muy exacto.

respecto a centrar el div en firefox no me hace caso al text-align:center :(


hay una web muy buena sobre css que la pondre si jorgens me permite :) si no es asi quitala si quieres.

http://www.ignside.net/man/css/clases.php

y ya puestos otra
http://www.htmlhelp.com/es/reference/css/

y ya puestos otra mas
http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#dynami…

y otra
http://www.cristalab.com/tutoriales/5-css-y-xhtml/

tengo muchas pero no tengo tiempo para leerlas jajajajaja.


un saludo

solo hay un pequeño problema, el alto de la div debe de ser estatico.

height:50px;
line-height:50px;

Esto funciona perfectamente. saludos ;D.

Hola a todos y para el q siga buscando....tras mucho buscar y poco encontrar prove lo siguiente para centrar verticalmente un texto dentro de una capa (es una chorrada):

Primero, usas padding: como veras la capa se desplaza hacia abajo la misma cantidad "Xpx" de padding q le hayas puesto, pues ahora...
Segundo, reduce la altura de dicha capa la misma cantidad que hayas puesto de padding.


Por ejemplo:

tienes esta capa:
<div id="capapruebapadding"><a href="#">hola manolo ljasd lsdklks</a></div>

y este CSS
#capapruebapadding {background-color:black; color:white; width:100px; height:100px; border: 4px solid yellow; margin:0px; float:left;}


al estilo CSS le añades y cambias lo siguiente: (lo he puesto en mayusculas pa que se vea)

#capapruebapadding {background-color:black; color:white; width:100px; height:70PX; border: 4px solid yellow; margin:0px; float:left; PADDING:30px 0px 0px 0px;}

y se centra el texto verticalmente. Seguramente haya algo mejor pero es lo unico q he conseguido sacar.