Foros Programación Cliente
Alineación vertical de texto en un DIV
22 22 Respuestas Viernes 29 de abril, 2011
Estoy intentado alinear verticalmente texto dentro de un div de tamaño limitado.
El texto se introducirá dinámicamente, y unas veces será más largo y otras más corto, por lo que a veces tendrá una linea y otras veces dos.
Esto:
Con tablas se puede hacer fácilmente, pero me gustaría solucionarlo con div y css.
Un saludo y gracias.
El texto se introducirá dinámicamente, y unas veces será más largo y otras más corto, por lo que a veces tendrá una linea y otras veces dos.
Esto:
Con tablas se puede hacer fácilmente, pero me gustaría solucionarlo con div y css.
Un saludo y gracias.
-
tiendy
Registrado desde 07/03/11 / Número de posts: 5
Hola serka,
a lo mejor te vale http://www.domestika.org/foros/5-programacion_cliente/hilos/86945-centrar_elemento_verticalmente.
-
chi
Registrado desde 23/05/07 / Número de posts: 198
Hola Serka, no acabo de entender muy bien lo que quieres hacer, puedes decirle que se ponga en un punto Y con top o también agragandole margen o relleno a la etiqueta p. -
laGuarda
Registrado desde 07/10/08 / Número de posts: 36
A mi la solución que propone Tiendy me parece la más acertada y la que menos problemas te dará. Por css siempre puedes hacer que el elemento contenedor se comporte como una tabla y centrar verticalmente entonces, algo así:
.contenedor{display:table;height:500px}
.contenido-a-centrar{display:table-cell;vertical-align:middle;}
Con esto debería de funcionar, pero recuerda que algunos navegadores (IE) te van a dar problemas con esta propiedad, por ello creo que con javascript como dice tiendy lo tendrás más controlado y sobre todo tu código será más semantico en el sentido de que con IE tendrás que comenzar a meter divs por medio para posicionar de forma absoluta...en fin, un rollo que me gustaría que te evitaras. Simplifica y vencerás! ;) -
rls
Registrado desde 04/05/11 / Número de posts: 9
Hola serka por si acaso todavia quieres el codigo en css, mi solucion seria esta:
Xhtml o Html:
<p id="serka">texto en linea, texto en linea, texto en linea, texto en linea, texto en linea</p>
<p id="serka">texto en linea</p>
CSS:
#serka {
width:250px;
border:2px solid #000;
padding: 5px 10px 5px 10px;
text-align:center;
}
un saludo! -
arquidea
Registrado desde 10/05/11 / Número de posts: 1
El css es lo mejor para casi toso lo relacionado con la arquitectura. -
serka
Registrado desde 09/06/04 / Número de posts: 107
Hola Ris, la clase que me pones ahí no pinta lo que yo quiero, el segundo p sería más alto que el primero, yo lo que necesito es que se quede centrado verticalmente dentro de una 'caja' que tenga la misma altura (cómo la imagen que puse de ejemplo)
Gracias de todos modos
Css es lo mejor, aunque en este caso creo que la única solución será combinarlo con javascript, tal y como expliqué antes.
Saludos y gracias. -
rls
Registrado desde 04/05/11 / Número de posts: 9
serka
Hola Ris, la clase que me pones ahí no pinta lo que yo quiero, el segundo p sería más alto que el primero, yo lo que necesito es que se quede centrado verticalmente dentro de una 'caja' que tenga la misma altura (cómo la imagen que puse de ejemplo)
Gracias de todos modos
Css es lo mejor, aunque en este caso creo que la única solución será combinarlo con javascript, tal y como expliqué antes.
Saludos y gracias.
Muy buenas serka, el id que he puesto, es un ejemplo pero las propiedades creo que te serviran,
por ejemplo:
#lo que sea {
width:250px; => el que sea incluso el valor auto ("Si asignas el valor auto, certificate de que herede o no los valores del div que lo envuelve, pudiendo ser inherit o clear: both, right o left") al no ver tu codigo no puedo decirte con exactitud.
border:2px solid #000; => color tipo y medida que quieras
padding: 5px 10px 5px 10px; => el que te convenga
text-align:center;
}
puedes incluir css en el mismo documento html o definir css en un archivo externo.
Copia lo que pego a continuacion en un editor de texto y guardalo como .html y abrelo.
<!-- inicio del codigo -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Designer</title>
<!-- Incluir CSS en el mismo documento HTML--><style type="text/css">
p {
width:250px;
border:2px solid #000;
padding: 5px 10px 5px 10px;
text-align:center;
}
</style>
</head>
<body>
<p>texto en una linea</p>
<p>texto en una linea, mas texto, mas texto, texto en dos lineas</p>
</body></html><!-- final del codigo -->
-------------------------------------------------------------
un saludo!
-
pabrigarcia
Registrado desde 31/05/08 / Número de posts: 83
No le pongas alto, le pones un padding de 5 arriba y abajo y el div crecera automáticamente a lo alto.-------------------------------------------------------------------------------
Diseño web valencia
Diseño tiendas online -
serka
Registrado desde 09/06/04 / Número de posts: 107
En la presentación del problema creo que explico que para el diseño necesitaba que el alto para esa caja fuese fijo.
Y que la alineación vertical dentro de ese alto fijo fuese centrada tanto para textos, de una o dos lineas.
Que ese texto se introducirá dinámicamente, por lo que no sé de antemano si tendrá una linea o dos...
Esto sólo se puede hacer, según lo que he averiguado con un javascript que cambie la clase cuando el texto sea de dos lineas.
Un saludo
-
pabrigarcia
Registrado desde 31/05/08 / Número de posts: 83
Por que necesitas obligatoriamente un alto? es que ahí esta el error...en cualquier caso prueba a darle min-height el alto de una linea asi siempre sera ese alto mínimo y cuando sean dos lineas automáticamente crecera a dos lineas.-------------------------------------------------------------------------------
Diseño web valencia
Diseño tiendas online -
pabrigarcia
Registrado desde 31/05/08 / Número de posts: 83
pues entonces sino funcionará no lo intentes...-------------------------------------------------------------------------------
Diseño web valencia
Diseño tiendas online -
MAXer3D
Registrado desde 07/05/03 / Número de posts: 106
La solución que más se aproxima es la que comentaba "laGuarda", pero esto dejaría de lado a ie6 y ie7, por lo que convendría agregarle el javascript que estas usando ahora.
En mis estadísticas veo que la gente que todavía usa esos navegadores llega al 15% aprox. Y los que tienen desactivado Javascript andan por el 10%.
Así que uniendo los dos métodos cubrimos casi todas las posibilidades:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CENTRAR</title>
<style type="text/css">
.tabla { height:50px; width:250px; border:solid 1px #333; text-align:center; float:left; display:table; font:12px Helvetica, "Arial Black", Gadget, sans-serif; overflow:hidden }
.celda { height:50px; width:230px; padding:0 10px; margin:0 auto; text-align:center; display:table-cell; vertical-align: middle; overflow:hidden}
</style>
</head>
<body>
<div class="tabla">
<div class="celda">texto en una linea</div>
</div>
<div class="tabla">
<div class="celda">texto en una linea, más texto, más Texto, Texto en dos lineas</div>
</div>
</body>
</html>
-
Bernarder
Registrado desde 21/05/11 / Número de posts: 8
http://www.csslab.cl/2007/01/12/centrado-vertical-con-css/
Ahí tienes una interesante discusión sobre como hacerlo con css y un hack, interesante leerse los comentarios. -
MAXer3D
Registrado desde 07/05/03 / Número de posts: 106
¿En que modo de Documento lo estas viendo?
Veo que es explorer 8 pero no se si esta en modo 8, ya que sale la barra de desarrollo abajo y no se ve el modo.
Como dato yo lo veo con explorer 9, en modo 8 y 9 se ve correctactamente, no así en 6 (no estándar) y 7.
Áreas Domestika
- Diseño (gráfico, web, industrial, producto)
- Programación (cliente, servidor, accesibilidad)
- Ilustración (autores, inspiración, técnicas)
- Fotografía (técnica, equipo, autores)
- Motion Graphics (showreels, software, estudios)
- Publicidad (campañas, anuncios, ideas)
- Informática (software, hardware, trucos)
- 3D (técnicas, iluminación, modelado)
- Experiencia de Usuario (usabilidad, AI, HCI)
- Cine, vídeo y televisión (críticas, producción)
- Música y Audio (sonidos, loops, discos)
- Espacios (arquitectura, interiorismo)