Foros del Web » Creando para Internet » CSS »

Centrado Horizontal y Vertical de 2 capas (div)

Estas en el tema de Centrado Horizontal y Vertical de 2 capas (div) en el foro de CSS en Foros del Web. Por fin he conseguido centrar tanto horizontal como verticalmente un div dentro de otro. Ademas con proporciones dinamicas (si reduces la ventana del navegador se ...
  #1 (permalink)  
Antiguo 05/10/2009, 17:33
Avatar de mdromed  
Fecha de Ingreso: septiembre-2009
Mensajes: 389
Antigüedad: 8 años, 3 meses
Puntos: 8
Centrado Horizontal y Vertical de 2 capas (div)

Por fin he conseguido centrar tanto horizontal como verticalmente un div dentro de otro.
Ademas con proporciones dinamicas (si reduces la ventana del navegador se autoajustan el ancho y el alto de las mismas.)

Así lo he hecho y esta probado en Chrome, IE8 y Firefox 3:


HTML:
Código HTML:
<body>
 <div id="css_tablaContenedorBorde">
  <div id="css_filaContenedorBorde">
   <div id="css_celdaContenedorBorde">
    <div id="css_tablaContenedor">
     <div id="css_filaContenedor">
      <div id="css_celdaContenedor">
        hola mundo
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</body> 

CSS:
Código:
body
{
    padding: 0;
    margin: 0;
    background: #fff;
    width: 100%;
    text-align: center;
}

html, body{height: 100%;}

/*ESTILOS EMULANDO TABLAS*/
div#css_tablaContenedor
{
    display: table;
    height:50%;
    width:50%;
    background-color: #fff;
    vertical-align: middle;
    text-align: center;
    margin: 0 auto;
}
div#css_filaContenedor
{
    display: table-row;
}

div#css_celdaContenedor
{
    display: table-cell;
    vertical-align: middle;
    width: 50%;
}

div#css_tablaContenedorBorde
{
    display: table;
    height:100%;
    width:100%;
    background-color: #ff00ff;
    vertical-align: middle;
    text-align: center;
    margin: 0 auto;
}
div#css_filaContenedorBorde
{
    display: table-row;
}

div#css_celdaContenedorBorde
{
    display: table-cell;
    vertical-align: middle;
    width: 50%;
    height:100%;
}

¿Que opinais?
  #2 (permalink)  
Antiguo 06/10/2009, 09:32
Avatar de mdromed  
Fecha de Ingreso: septiembre-2009
Mensajes: 389
Antigüedad: 8 años, 3 meses
Puntos: 8
Respuesta: Centrado Horizontal y Vertical de 2 capas (div)

A ver si me podeis confirmar que funcione tb en safari
  #3 (permalink)  
Antiguo 06/10/2009, 09:59
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: Centrado Horizontal y Vertical de 2 capas (div)

Sí, funciona en Safari 4.

Pero, ya sabrás, que no funciona en iexplorer 6 ni en el 7.

Bye
  #4 (permalink)  
Antiguo 06/10/2009, 10:26
Avatar de mdromed  
Fecha de Ingreso: septiembre-2009
Mensajes: 389
Antigüedad: 8 años, 3 meses
Puntos: 8
Respuesta: Centrado Horizontal y Vertical de 2 capas (div)

Cita:
Iniciado por deirdre Ver Mensaje
Sí, funciona en Safari 4.

Pero, ya sabrás, que no funciona en iexplorer 6 ni en el 7.

Bye
En el IE6 seguro que no.
En el IE7 no estoy seguro del todo. ¿Lo has comprobado?

De todas maneras yo creo que lo que deberiamos hacer todos los diseñadores web es UNICAMENTE COMPATIBILIZAR NUESTRAS WEBS CON LAS ULTIMAS VERSIONES DE LOS NAVEGADORES ya que se garantizará la correcta utilizacion de los elementos standar.

Así tb obligariamos a la gente a actualizar sus navegadores y prescindir de una vez por todas de IE6 y similares.

Saludos y gracias Deirdre!
  #5 (permalink)  
Antiguo 06/10/2009, 11:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrado Horizontal y Vertical de 2 capas (div)

Cita:
Iniciado por mdromed Ver Mensaje
De todas maneras yo creo que lo que deberiamos hacer todos los diseñadores web es UNICAMENTE COMPATIBILIZAR NUESTRAS WEBS CON LAS ULTIMAS VERSIONES DE LOS NAVEGADORES ya que se garantizará la correcta utilizacion de los elementos standar.
A esta discusiónn también llegas un poco tarde (como te han dicho en la de las tablas), mdromed, porque se ha debatido largo y tendido en diversas (muchas) ocasiones. Haz una simple búsqueda en el foro y lo comprobarás.
Está bien que des tu opinión, pero estaría mejor en alguno de los múltiples hilos de discusión que ha habido al efecto.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 06/10/2009, 11:56
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: Centrado Horizontal y Vertical de 2 capas (div)

Hola mdromed

Diseñar para los últimos navegadores sería una bendición, si no fuese porque es también un desprecio hacia muchísimos usuarios que utilizan (muchas veces porque no tienen otra solución) navegadores más antiguos (ie7 ni siquiera es muy antiguo, tiene sólo poco más de dos años). Y también es un boomerang contra nuestros trabajos porque si dejas de atender a ie6 y ie7 pierdes el 50% de los navegantes.

Bye
  #7 (permalink)  
Antiguo 06/10/2009, 15:53
Avatar de mdromed  
Fecha de Ingreso: septiembre-2009
Mensajes: 389
Antigüedad: 8 años, 3 meses
Puntos: 8
Respuesta: Centrado Horizontal y Vertical de 2 capas (div)

O sea que, a dia de hoy, no queda otra que diseñar con hacks css no?
  #8 (permalink)  
Antiguo 06/10/2009, 18:22
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: Centrado Horizontal y Vertical de 2 capas (div)

Pues sí, con hacks si son necesarios (pero no siempre lo son). Editando y comprobando en los navegadores más usados y rectificando hasta que se vea la página (y se comporte) aproximadamente igual en todos ellos.

Paciencia y suerte...

Bye
  #9 (permalink)  
Antiguo 06/10/2009, 19:35
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Centrado Horizontal y Vertical de 2 capas (div)

Cita:
COMPATIBILIZAR NUESTRAS WEBS CON LAS ULTIMAS VERSIONES DE LOS NAVEGADORES
Supongo que con una correcta implementacion... debe funcionar en cualquiera... pero si aplicamos "Se ve bien, esta correcto!!!" alli la hemos jodio...

COMPATIBILIZAR jaja me encanto

PD: Los hacks son remedios no soluciones... si nos concentramos en maquetar correctamente salen sobrando estos... y sobre todo paciencia como bien dice deirdre...

mdromed tranki... sino te gusta CSS no lo uses... ahroa si trabajas como desarrollador... tienes que cumplir como tal y hacer las cosas correctas... para tener a tus clientes contentos... a nadie le gusta mancharse las manos con IE... pero bueno hay que hacerlo chao y suerte!...
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 06:38.