¿ Centrar texto VERTICALMENTE dentro de un DIV ?

[davidj]

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!!

[DragonX]

vertical-align es la propiedad que buscas.

Slds.-

[Dalvenjha]

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

[kseso?]

¿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 |

[hdennison]

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

[kseso?]

Iniciado por hdennison

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

[Dalvenjha]

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.

[hdennison]

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.

[BloodShadow]

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:

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

Código CSS:

.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

[davidj]

ok probaré a ver..

gracias

[kseso?]

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

[davidj]

¿¿¿¿ como ????, ya he dado las gracias y estoy en pruebas.... ¿¿ no entiendo ???

[BloodShadow]

Iniciado por davidj

¿¿¿¿ como ????, ya he dado las gracias y estoy en pruebas.... ¿¿ no entiendo ???

+1

[Impostor]

Iniciado por kseso?

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

Iniciado por davidj

¿¿¿¿ como ????, ya he dado las gracias y estoy en pruebas.... ¿¿ no entiendo ???

No tengo nada mas que decir.

[davidj]

Iniciado por kseso?

¿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!

[kseso?]

Iniciado por davidj

¿¿¿¿ 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á.

Iniciado por BloodShadow

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

Iniciado por Impostor

No tengo nada mas que decir.

Gracias por evitarme la autocita.

Iniciado por davidj

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.

[davidj]

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!!

[BloodShadow]

Iniciado por davidj

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

[davidj]

ostras! pues es verdad, lo tendré en cuenta gracias!

[mochilero]

.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

[jomaruro]

Iniciado por kseso?

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

Iniciado por davidj

¿¿¿¿ como ????, ya he dado las gracias y estoy en pruebas.... ¿¿ no entiendo ???

Iniciado por BloodShadow

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

Iniciado por davidj

ostras! pues es verdad, lo tendré en cuenta gracias!

kseso? Creo que, por fín, entendió lo que le solicitabas desde el principio.

Saludos.

[C2am]

Iniciado por mochilero

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

[jomaruro]

Hola:

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

Saludos.