Alineación vertical de texto en un DIV
10 seguidores
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.
tiendy
Hola serka,
a lo mejor te vale http://www.domestika.org/foros/5-programacion_cliente/hilos/86945-centrar_elemento_verticalmente.
serka
Intentaba hacerlo solo con CSS.
Con Java Script lo tengo solucionado ya.
Gracias.
Usuario desconocido
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
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! ;)
serka
Finalmente lo he hecho con un javascript, que añade a la etiqueta un class que hace que se quede como necesitaba.
esto:
lo probé pero no me funcionaba ni con firefox.
Gracias a todos
Usuario desconocido
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
El css es lo mejor para casi toso lo relacionado con la arquitectura.
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.
Usuario desconocido
serka
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!
serka
Eso da como resultado el mismo ancho pero no el mismo alto de la caja.
pabrigarcia
No le pongas alto, le pones un padding de 5 arriba y abajo y el div crecera automáticamente a lo alto.
serka
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
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.
serka
Necesito un alto fijo porque el diseño es así.
Eso que me dices del min-height no funcionará, por que se alinearán verticalmente arriba, tanto una como dos lineas.
pabrigarcia
pues entonces sino funcionará no lo intentes...
MAXer3D
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
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.
serka
Probé lo de display:table y display:cell, y no me funcionó, mirad:
Intentaré lo de tu enlace Bernarder.
Gracias!
MAXer3D
¿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.
mads_creativo
Chicos pueden darme un presupuesto aproximado para una web tipo esta. http://www.secibzaragoza.com/
He cogido la cuenta de este congreso para el año que viene y necesito informarme de los precios de web para sacarla fuera pues el precio está metido en el paquete de la cuenta.
Un saludo y gracias.
Capitan Tostadilla
¿Y por que simplemente no usas una tabla?
tiendy
Comparto un recurso interesante que he encontrado sobre este tema:
http://www.student.oulu.fi/~laurirai/www/css/middle/
Muestra un montón de técnicas para centrar objetos verticalmente usando CSS.
Saludos
javier_pinol
Aquí hay varias formas de hacerlo:
http://dariobf.com/centrar-verticalmente-con-css-6-formas-diferentes-de-lograrlo/
microbians Staff
https://www.domestika.org/es/forums/5-programacion-cliente/topics/96567-centrado-vertical-con-3-lineas-de-css