Foros del Web » Creando para Internet » CSS »

¿ Centrar texto VERTICALMENTE dentro de un DIV ?

Estas en el tema de ¿ Centrar texto VERTICALMENTE dentro de un DIV ? en el foro de CSS en Foros del Web. Hola foreros! Resulta que hace tiempo que busco la manera de poder centrar texto VERTICALMENTE dentro de un DIV y no acabo de encontrar nada ...
  #1 (permalink)  
Antiguo 18/10/2010, 06:15
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.023
Antigüedad: 14 años, 2 meses
Puntos: 16
¿ Centrar texto VERTICALMENTE dentro de un DIV ?

Hola foreros!

Resulta que hace tiempo que busco la manera de poder centrar texto VERTICALMENTE dentro de un DIV y no acabo de encontrar nada para realizarlo de manera "sencilla". Yo hasta ahora lo realizo manualmente con padding pero me gustaría utilizar alguna propiedad que hiciera eso automáticamente, como las tablas.

¿No se puede hacer con CSS?

Muchas gracias de antemano!!
  #2 (permalink)  
Antiguo 18/10/2010, 07:08
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

vertical-align es la propiedad que buscas.

Slds.-
  #3 (permalink)  
Antiguo 18/10/2010, 10:32
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

Pero dragón hay que especificarle que debe usar el display table-cell =D. Si no se matará haciéndolo por las puras.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #4 (permalink)  
Antiguo 18/10/2010, 13:03
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

¿Qué características tiene el div donde aloja el texto? altura fija, variable, mínima...
Lo mismo para el texto: variará o será siempre el mismo, se genera en función de algún parámetro, será una sola etiqueta p o varias...
Le comento lo anterior porque en función de las particularidades que deba cumplir se podrá enfocar por una vía u otra.

Vertical-align se puede aplicar no sólo a los elementos con display: table-cell (que necesitará su table y t-row en ancestros), también a los elementos a nivel de línea.

Y aclarar que los valores /table.../* para display no son soportados por la familia de ie (ahora no recuerdo si la ver.8 ya le dio soporte)


* /table.../ = | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption |
  #5 (permalink)  
Antiguo 18/10/2010, 14:55
 
Fecha de Ingreso: octubre-2010
Mensajes: 66
Antigüedad: 7 años, 2 meses
Puntos: 7
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

Si, IE da soporte a display table y derivados.

Para todo lo demás, puedes usar display: inline-block, aplicado en elementos que por defecto fuesen inline que si no tampoco funcionará en IE6/7
  #6 (permalink)  
Antiguo 18/10/2010, 15:23
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

Cita:
Iniciado por hdennison Ver Mensaje
Si, IE da soporte a display table y derivados.

Para todo lo demás, puedes usar display: inline-block, aplicado en elementos que por defecto fuesen inline que si no tampoco funcionará en IE6/7
No, ie no lo soporta, excepto el último (ver.8) tanto display: table como inline-block. Aunque ésta última, el 7 en ciertos casos sí, pero se puede generalizar que no es aconsejable usarlo pensando en quienes lo utilizan (el 7)
Puede verificarlo aquí:
http://www.quirksmode.org/css/display.html
  #7 (permalink)  
Antiguo 18/10/2010, 16:00
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

Sabía que no era soportado por ie y que necesita ancestros con los display mencionados, pero siendo que es una de las propiedades más complejas y menos soportadas creo que el vertical align no es una solución si no más bien un problema.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #8 (permalink)  
Antiguo 18/10/2010, 16:15
 
Fecha de Ingreso: octubre-2010
Mensajes: 66
Antigüedad: 7 años, 2 meses
Puntos: 7
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

Perdón,quería decir que IE8 soportaba display table (olvidé el 8)
En la propia página que indicas comenta lo mismo que yo: display inline-block funciona en IE7/6 siempre que se aplique sobre un elemento inline.
  #9 (permalink)  
Antiguo 19/10/2010, 18:26
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

si el div q contendra el texto no varia el tamaño de alto... basta con que uses un line-height del mismo tamaño del div. Ejemplo:

Código HTML:
Ver original
  1. <div class="contenedor-texto">
  2.   <p>
  3.     TEXTO DE PRUEBA
  4.   </p>
  5. </div>

Código CSS:
Ver original
  1. .contenedor-texto { width: 100%; height: 100px; line-height: 100px; }

Esto solo es en caso de que el contenedor no crecera, es la solucion mas facil y rapido que puedo darte xq yo asi lo uso siempre :D

Saludos y espero te sirva
  #10 (permalink)  
Antiguo 20/10/2010, 02:34
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.023
Antigüedad: 14 años, 2 meses
Puntos: 16
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

ok probaré a ver..

gracias
  #11 (permalink)  
Antiguo 20/10/2010, 06:31
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

Pues perfecto, Davidj.
Así da gusto preocuparse por los problemas ajenos.
Le solicitan información complementaria y como quien oye llover.
Bueno, mi cierre de tema vista la información que ha facilitado:
alineación vertical texto css
  #12 (permalink)  
Antiguo 20/10/2010, 08:09
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.023
Antigüedad: 14 años, 2 meses
Puntos: 16
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

¿¿¿¿ como ????, ya he dado las gracias y estoy en pruebas.... ¿¿ no entiendo ???
  #13 (permalink)  
Antiguo 20/10/2010, 09:22
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

Cita:
Iniciado por davidj Ver Mensaje
¿¿¿¿ como ????, ya he dado las gracias y estoy en pruebas.... ¿¿ no entiendo ???
+1
  #14 (permalink)  
Antiguo 20/10/2010, 09:36
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

Cita:
Iniciado por kseso? Ver Mensaje
¿Qué características tiene el div donde aloja el texto? altura fija, variable, mínima...
Lo mismo para el texto: variará o será siempre el mismo, se genera en función de algún parámetro, será una sola etiqueta p o varias...
Le comento lo anterior porque en función de las particularidades que deba cumplir se podrá enfocar por una vía u otra.
Cita:
Iniciado por davidj Ver Mensaje
¿¿¿¿ como ????, ya he dado las gracias y estoy en pruebas.... ¿¿ no entiendo ???
No tengo nada mas que decir.
__________________
Revisa las FAQ's antes de disparar.
  #15 (permalink)  
Antiguo 20/10/2010, 10:44
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.023
Antigüedad: 14 años, 2 meses
Puntos: 16
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

Cita:
Iniciado por kseso? Ver Mensaje
¿Qué características tiene el div donde aloja el texto? altura fija, variable, mínima...
Lo mismo para el texto: variará o será siempre el mismo, se genera en función de algún parámetro, será una sola etiqueta p o varias...
Le comento lo anterior porque en función de las particularidades que deba cumplir se podrá enfocar por una vía u otra.

Vertical-align se puede aplicar no sólo a los elementos con display: table-cell (que necesitará su table y t-row en ancestros), también a los elementos a nivel de línea.

Y aclarar que los valores /table.../* para display no son soportados por la familia de ie (ahora no recuerdo si la ver.8 ya le dio soporte)


* /table.../ = | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption |
Se trataría de centrar verticalmente el texto de dentro un div con altura fija. Parece mentira que algo tan sencillo sea tan entretenido con css..

Gracias a todos!
  #16 (permalink)  
Antiguo 20/10/2010, 11:05
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

Cita:
Iniciado por davidj Ver Mensaje
¿¿¿¿ como ????, ya he dado las gracias y estoy en pruebas.... ¿¿ no entiendo ???
Pues pregunte qué es lo que no ha entendido. Gustosamente se le explicará.
Cita:
Iniciado por BloodShadow Ver Mensaje
+1
Puede usted silbar todo lo que quiera y todo lo alto que quiera, mientras, léase completo el hilo.
Y sí, su sugerencia es muy válida y funcionará... mientras no haya más que una línea de texto. Verifique qué ocurre si son dos o más.

Cita:
Iniciado por Impostor Ver Mensaje
No tengo nada mas que decir.
Gracias por evitarme la autocita.
Cita:
Iniciado por davidj Ver Mensaje
Se trataría de centrar verticalmente el texto de dentro un div con altura fija. Parece mentira que algo tan sencillo sea tan entretenido con css..
Gracias a todos!
Sigue sin aportar las particularidades, así que se lo digo de otra forma: códigos, postee usted los códigos implicados, que ya es usted veterano en estos foros. Que algo de hados madrinos o hadas padrinas quizás tengamos, pero adivinos no. En absoluto.
  #17 (permalink)  
Antiguo 20/10/2010, 12:14
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.023
Antigüedad: 14 años, 2 meses
Puntos: 16
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

hola kseso,

Después de varias pruebas creo que el método de bloodshadow es el más sencillo ...

.contenedor-texto
{
width: 100%;
height: 400px;
line-height: 400px;
background-color: #00CCFF
}


<div class="contenedor-texto">
TEXTO DE PRUEBA
</div>



Gracias de nuevo por el interés a todos!!
  #18 (permalink)  
Antiguo 20/10/2010, 15:24
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

Cita:
Iniciado por davidj Ver Mensaje
hola kseso,

Después de varias pruebas creo que el método de bloodshadow es el más sencillo ...

.contenedor-texto
{
width: 100%;
height: 400px;
line-height: 400px;
background-color: #00CCFF
}


<div class="contenedor-texto">
TEXTO DE PRUEBA
</div>



Gracias de nuevo por el interés a todos!!
OJO!!! lo que dijo kesso mas arriba es cierto, si tendras 2 lineas se te jode todo jajaj asi que OJO con eso... pero si es solo para un slogan del sitio o textos de una sola linea, te funcionara perfectamente
  #19 (permalink)  
Antiguo 20/10/2010, 16:04
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.023
Antigüedad: 14 años, 2 meses
Puntos: 16
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

ostras! pues es verdad, lo tendré en cuenta gracias!
  #20 (permalink)  
Antiguo 15/04/2011, 19:48
 
Fecha de Ingreso: abril-2011
Mensajes: 1
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

.centrado {
background-color: #0CF;
position: relative;/*esto hace que la posicion del div a centrar sea relativo a su contenedor*/
top: 50%; /*esto lo coloca a la mitad de su contenedor*/
}


<div style=" background-color:#CCC; height:200px">
<div class="centrado">Colocar aquí el contenido de la nueva etiqueta Div</div>
</div>


Espero esto ayude
  #21 (permalink)  
Antiguo 16/04/2011, 03:59
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

Cita:
Iniciado por kseso? Ver Mensaje
¿Qué características tiene el div donde aloja el texto? altura fija, variable, mínima...
Lo mismo para el texto: variará o será siempre el mismo, se genera en función de algún parámetro, será una sola etiqueta p o varias...
Le comento lo anterior porque en función de las particularidades que deba cumplir se podrá enfocar por una vía u otra.
Cita:
Iniciado por davidj Ver Mensaje
¿¿¿¿ como ????, ya he dado las gracias y estoy en pruebas.... ¿¿ no entiendo ???
Cita:
Iniciado por BloodShadow Ver Mensaje
OJO!!! lo que dijo kesso mas arriba es cierto, si tendras 2 lineas se te jode todo jajaj asi que OJO con eso... pero si es solo para un slogan del sitio o textos de una sola linea, te funcionara perfectamente
Cita:
Iniciado por davidj Ver Mensaje
ostras! pues es verdad, lo tendré en cuenta gracias!
kseso? Creo que, por fín, entendió lo que le solicitabas desde el principio.

Saludos.

  #22 (permalink)  
Antiguo 17/04/2011, 19:53
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

Cita:
Iniciado por mochilero Ver Mensaje
.centrado {
background-color: #0CF;
position: relative;/*esto hace que la posicion del div a centrar sea relativo a su contenedor*/
top: 50%; /*esto lo coloca a la mitad de su contenedor*/
}


<div style=" background-color:#CCC; height:200px">
<div class="centrado">Colocar aquí el contenido de la nueva etiqueta Div</div>
</div>


Espero esto ayude
¿Con esto, el div no quedaría debajo del 50%? Es decir, no estaría centrado, sino que estaría ubicado de la mitad hacia abajo.
Pregunto porque para mí no queda centrado de esta forma, en todo caso tendría que restarle al 50% del contenedor el 50% de la altura del div que se pretende centrar y estaríamos haciendo lo que no quiere davidj.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #23 (permalink)  
Antiguo 18/04/2011, 02:24
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ¿ Centrar texto VERTICALMENTE dentro de un DIV ?

Hola:

Échale un vistazo a este ejemplo de Centrado Vertical con CSS

Saludos.


Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:51.