Texto centrado verticalmente en una capa

Citar

Escrito el 21 May 2008 02:27 pm

¿Y cómo hago para centrar verticalmente un texto que está en una capa? El vertical-align ese no me funciona...

Por Juanlu_001

Claber

690 de clabLevel

6 tutoriales

Envíale un mensaje privado Email Web

@Juanlu001

Citar

Escrito el 21 May 2008 02:48 pm

Creo recordar, que no se puede centrar el texto, pero sí el div que lo contiene.

[Más]

y [más aún].

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 23 May 2008 07:10 pm

Yo conozco una forma que implica que tienes que tener un tamaño fijo para el texto que quieras centrar y no se si esto se adapta a lo que tu necesitas, pero por si acaso ahí va el código de muestra:

<body>
<div style="border:solid 2px #060;width:100%;height:100px"><p style="font:bold 12px Geneva, Arial, Helvetica, sans-serif;color:#06F;position:relative;width:350px;height:12px;top:50%;left:50%;margin-top:-6px;margin-left:-175px">Este texto debería estar centrado horizontal y verticalmente</p></div>
</body>
</html>

Explicación: la clave de este ejemplo es que necesitas conocer el ancho y alto exacto de lo que quieres centrar para que funcione (en este caso el elemento p que contiene el texto); entonces para un ancho de 350 px por ejemplo, el left siempre en 50% y el margin-left como la mitad del ancho (350/2) en negativo se centrará horizontalmente siempre. Hay que hacer lo mismo con las propiedades de la escala vertical (height en este caso:12px, top:siempre en 50% y margin-top el -height/2, en este caso, -6px). Así estaría centrado en vertical y horizontal con respeto al div que lo contiene. Si modificas el ancho o el alto del elemento p entonces hay que modificar esas propiedades adaptándolas al nuevo tamaño.

Este método vale para centrar cualquier cosa en vertical, en horizontal o ambas. Me imagino que adaptándolo a tu caso particular te podría ser útil.

Por doblefantasia

15 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Citar

Escrito el 23 May 2008 08:30 pm

Mmm he encontrado un método que está muy bien para texto, que es poner la propiedad line-height igual al alto de la capa si es una línea sola, o la mitad si son dos, etc... Queda muy bien y es muy sencillo

Por Juanlu_001

Claber

690 de clabLevel

6 tutoriales

Envíale un mensaje privado Email Web

@Juanlu001

Citar

Escrito el 23 May 2008 08:46 pm

Sí.
Tal y como indicaban los links que indiqué.
U_U

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Texto centrado verticalmente en una capa

Escribe una respuesta rapida