Foros del Web » Creando para Internet » CSS »

Centar div verticalmente en otro DIV (IE)

Estas en el tema de Centar div verticalmente en otro DIV (IE) en el foro de CSS en Foros del Web. Preciso alinear verticalmente un div que se encuentra dentro de otro div que su altura de la cantidad de texto que posea. En Firefox funciona ...
  #1 (permalink)  
Antiguo 07/02/2007, 01:16
Avatar de reyesoft  
Fecha de Ingreso: abril-2006
Ubicación: San Rafael, Mendoza
Mensajes: 311
Antigüedad: 11 años, 8 meses
Puntos: 15
Centar div verticalmente en otro DIV (IE)

Preciso alinear verticalmente un div que se encuentra dentro de otro div que su altura de la cantidad de texto que posea.

En Firefox funciona a la perfección, pero en IE no (que raro! )

CSS
Código:
#padre {
    position:relative;
}
#hijo {
    position:absolute;
    top:50%;
    height:10px;
    margin-top:-5px;
}
HTML
Código HTML:
<p>Párrafo fuera del padre 1</p>
<p>Párrafo fuera del padre 2</p>
<div id="padre">
    <div id="hijo">cargando...</div>
    <p>Párrafo 1</p>
    <p>Párrafo 2</p>
    <p>(pueden haber muchos más párrafos)  </p>
</div> 
El problema es que IE toma top:50%; como el 50% del body y no de #padre; haciendo que el div #hijo se muestre mucho más abajo.

Desde ya muy agradecido por su constante ayuda.
__________________
Pablo Reyes

Compra/venta saldos PayPal, Skrill, Neteller, Bitcoins, etc.
  #2 (permalink)  
Antiguo 07/02/2007, 04:26
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
Re: Centar div verticalmente en otro DIV (IE)

Creo que se debe a que el padre no tiene tamaño de alto definido y no sabe interpretar el 50% de "nada".

Mikel.
  #3 (permalink)  
Antiguo 07/02/2007, 05:01
Avatar de reyesoft  
Fecha de Ingreso: abril-2006
Ubicación: San Rafael, Mendoza
Mensajes: 311
Antigüedad: 11 años, 8 meses
Puntos: 15
Re: Centar div verticalmente en otro DIV (IE)

Cita:
Iniciado por Mikmoro Ver Mensaje
Creo que se debe a que el padre no tiene tamaño de alto definido y no sabe interpretar el 50% de "nada".
Claro, como está en el ejemplo, no puedo definir el alto, porque varía de acuerdo a la cantidad de texto.

Igualmente gracias.... ¿Alguna otra pista colegas?
__________________
Pablo Reyes

Compra/venta saldos PayPal, Skrill, Neteller, Bitcoins, etc.
  #4 (permalink)  
Antiguo 07/02/2007, 05:38
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
Re: Centar div verticalmente en otro DIV (IE)

No había entendido que por lo visto el problema ya lo tenías identificado, y que lo que buscabas era cómo solucionarlo.

Prueba añadiendo esto al selector "padre":

height: auto ! important;
height: 10px;

Mikel.
  #5 (permalink)  
Antiguo 07/02/2007, 18:27
Avatar de reyesoft  
Fecha de Ingreso: abril-2006
Ubicación: San Rafael, Mendoza
Mensajes: 311
Antigüedad: 11 años, 8 meses
Puntos: 15
Re: Centar div verticalmente en otro DIV (IE)

Muy agradecido Mikmoro. Funcionó a la perfección.

Saludos!
__________________
Pablo Reyes

Compra/venta saldos PayPal, Skrill, Neteller, Bitcoins, etc.
  #6 (permalink)  
Antiguo 27/02/2008, 03:16
 
Fecha de Ingreso: febrero-2008
Mensajes: 4
Antigüedad: 9 años, 9 meses
Puntos: 0
Centar div verticalmente en otro DIV (IE)

Buenas, Tengo un problema parecido con IE:

Quiero que los divs categories y partner aparezcan centrados dentro de center, pero partner aparece encuadrado arriba a la derecha de center.


Cita:
div#central{
position:relative;
BORDER: #EA3B3E 1px solid ;
height: auto;
}
div#categories {
position: relative;
float:left;
left:10px;
top: 50%;
background-color: white;
float:left;
}
div#partner {
position:absolute;
width: 50%;
top: 50%;
BORDER: #EA3B3E 1px solid ;
float:right;
}
HTML:

Cita:
<div id="central">

<div id="partner" align="left">
<font color="red"> blahbalhbalh </font>
Come And Download For Free<br/>
<a href="http://www.blahblah.com/">->GO</a>
</div>

<div id="categories">
<font size='3'><br> Categories: <br/></font>
<font size='2' color='blue'>
<br><input type='radio' /> <u> Foo </u> <br/>
<br><input type='radio' /> <u> Foo </u> <br/>
<br><input type='radio' /> <u> News </u>
</div>
</div>
¿¿Alguna idea??

Gracias!
  #7 (permalink)  
Antiguo 27/02/2008, 04:19
 
Fecha de Ingreso: febrero-2008
Mensajes: 6
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Centar div verticalmente en otro DIV (IE)

Prueba esto a ver que tal, ya nos dices.

div#central{
width:70%; /*Ancho del contenedor*/
margin: 20px auto; /*Centrar el contenedor en la página*/
height: 400px; /*Altura del contenedor*/
border: #ea3b3e 1px solid;
}

div#partner{
width:50%;
margin-top:10%;
float:left;
}

div#categories {
margin-left:50%;
margin-top:10%;
border: #ea3b3e 1px solid;
}
  #8 (permalink)  
Antiguo 27/02/2008, 04:38
 
Fecha de Ingreso: febrero-2008
Mensajes: 4
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Centar div verticalmente en otro DIV (IE)

Gracias Por la Respuesta!

Olvidé mencionar que la página tiene que verse desde un dispositivo móvil (y que quiero que partner quede a la derecha de categories). He modificado el código así:

Cita:
div#central{

width:100%; /*Ancho del contenedor*/
margin: 0px auto; /*Centrar el contenedor en la página*/
height: auto; /*Altura del contenedor*/
border: #ea3b3e 1px solid;

}

div#partner{

width:50%;
margin-top:10%;
float:right;

}

div#categories {

margin-left:0px;
margin-top:0px;
border: #ea3b3e 1px solid;

}
Me parece un buen punto de partida, pero aún así el div partner ahora se ve debajo del div categories a la derecha (y da la impresión de que está fuera de center, cosa que no entiendo, porque los divs categories y partner los tengo rodeados con el central en el html)

Me gustaría centrarlos horizontalmente y verticalmente.
  #9 (permalink)  
Antiguo 27/02/2008, 06:08
 
Fecha de Ingreso: febrero-2008
Mensajes: 4
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Centar div verticalmente en otro DIV (IE)

Bueno, como ya he hallado la socución y seguro que a alguien más puede interesarle, pues me respondo a mí mismo, la solcuión es:

Cita:
div#central{

width:100%;
margin: 0px auto;
height: auto;
height: 10px;
}

div#partner{
width:50%;
margin-top:15%;
float:right;
}

div#categories {
width:40%;
margin-left:0px;
margin-top:0px;
float:left;
}
Ala pues, Suerte y Gracias!!
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 21:16.