como centrar texto en capa div

**Marttyn** · 21/04/2006, 00:04

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)

**solidaria** · 21/04/2006, 21:46

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

**solidaria** · 29/04/2006, 18:21

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

**jorgens** · 29/09/2006, 18:32

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....)

**jorgens** · 29/09/2006, 18:46

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!

**Max Power** · 29/09/2006, 22:45

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

**jorgens** · 29/09/2006, 23:42

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

je je je.

**Max Power** · 22/10/2006, 23:37

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

**solidaria** · 23/10/2006, 06:39

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/tra...pseudo-classes

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

tengo muchas pero no tengo tiempo para leerlas jajajajaja.

un saludo