Foros del Web » Creando para Internet » CSS »

Centrar un div con respecto a otro

Estas en el tema de Centrar un div con respecto a otro en el foro de CSS en Foros del Web. Hola, ¿cómo andan? tengo un problemita de diseño, a ver si alguien me puede ayudar, supongamos este código: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original <!DOCTYPE ...
  #1 (permalink)  
Antiguo 11/06/2010, 16:29
 
Fecha de Ingreso: marzo-2009
Mensajes: 47
Antigüedad: 8 años, 8 meses
Puntos: 0
Centrar un div con respecto a otro

Hola, ¿cómo andan? tengo un problemita de diseño, a ver si alguien me puede ayudar, supongamos este código:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.     <title>Centrar Divs</title>
  5.     <style type="text/css">
  6.         .ref{
  7.             float:left;
  8.             background-color:#BCFCFF;
  9.             width:30%;
  10.         }
  11.         .centrado{
  12.             background-color:#FFFB9B;
  13.             float:left;
  14.             width:30%;
  15.             margin-top:auto;
  16.         }
  17.     </style>
  18. </head>
  19.     <div class="contenido">
  20.         <div class="ref">
  21.             <h1>Título del contenido</h1>
  22.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae sapien sit amet erat rhoncus consequat nec at ipsum. Vivamus molestie, metus nec aliquet scelerisque, metus leo pretium purus, eu varius felis orci non arcu. Aliquam ligula justo, tempus ac posuere at, facilisis semper quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam auctor tortor eu leo mattis rutrum. Nulla euismod fermentum feugiat. Duis vehicula, velit nec mattis scelerisque, felis quam dapibus libero, tempor laoreet leo nibh vitae ipsum. Proin elementum interdum purus, quis ornare felis placerat ut. Vivamus egestas ornare ipsum. Vivamus sit amet tellus velit, at hendrerit nulla. In semper magna a tellus dapibus ut posuere dui mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
  23.         </div>
  24.         <div class="centrado">
  25.             Esto debe ir centrado con el DIV celeste
  26.         </div>
  27.     </div>
  28. </body>
  29. </html>

Como ven muestra un Div celeste con uno amarillo a su derecha...
Lo que quiero hacer es que el div amarillo se alinee verticalmente con respecto al celeste independientemente del contenido del amarillo, también necesito que estén los 2 flotando a la izquierda como lo están ahora.

¿Habrá alguna forma sin recurrir a tablas y/o JS?
Puede que en el DIV izquierdo haya una imagen, ¿ayudaría verticla-align en ese caso?

Un Saludo!
  #2 (permalink)  
Antiguo 11/06/2010, 18:58
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
De acuerdo Respuesta: Centrar un div con respecto a otro

Te aconsejo que siempre busques en el foro, este es un problema bastante comun, te paso una respuesta que di anteriormente:

Cita:
lo que puedes hacer es ponerle el fondo de los dos divs al contenedor, el cual si se estiraria.

Por ejemplo si la columna uno ("azul") es mas larga que la columna dos ("roja") y quiero que se miren iguales lo que haria seria crear un fondo mitad azul mitad rojo y aplicarselo al contenedor con un y-repeat.
Aqui lo unico que te faltaria seria agregar un <div style="clear:both"></div> despues de la segunda columna, adentro del contenedor

Espero te sirva
  #3 (permalink)  
Antiguo 11/06/2010, 19:09
 
Fecha de Ingreso: marzo-2009
Mensajes: 47
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: Centrar un div con respecto a otro

Hola, gracias por responder.

El problema es que el color de fondo de los Divs no tiene nada que ver, ya que en realidad ni fondo llevan, era solo para diferenciar los divs en la página de prueba.

Yo lo que estoy haciendo ahora, es al div amarillo que se encuentra muy arriba, darle bastante margen superior, la cuestión es que si cambia el número de líneas del contenido de uno u otro div, no quedaría bien centrado por lo que un margen único no me sirve, ya que tengo una lista de pares de divs, y todos deberían quedar centrados.

Un Saludo!
  #4 (permalink)  
Antiguo 11/06/2010, 20:23
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
De acuerdo Respuesta: Centrar un div con respecto a otro

Si lo que quieres es simplemente centrarlo verticalmente, deverias centrar cada uno con relacion al contenedor lo que tienes que hacer es algo asi:

Código:
<div style="position:relative;"><!--contenedor-->

   <div style="position:absolute; left=0; top:50%; width=30%;"><!--columna1-->
        <div style="position:relative; top=-50%;">
        </div>
   </div>

   <div style="position:absolute; left=30%; top:50%; width=30%;"><!--columna2-->
        <div style="position:relative; top=-50%;">
        </div>
   </div>

</div>
creo que tienes que modificar esto para que te funcione en todos los borwsers
es solo un ejemplo
igual te puedes verificar en el foro

link

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 11:55.