Foros del Web » Creando para Internet » CSS »

Centrar 2 o mas divs horizontalmente

Estas en el tema de Centrar 2 o mas divs horizontalmente en el foro de CSS en Foros del Web. Hola gente....me estoy volviendo loco... Lo que quiero es una fila de 4 divs que contendran algo (puede ser imagenes con links hacia algun lado), ...
  #1 (permalink)  
Antiguo 12/09/2012, 19:15
 
Fecha de Ingreso: abril-2009
Mensajes: 35
Antigüedad: 14 años, 11 meses
Puntos: 1
Centrar 2 o mas divs horizontalmente

Hola gente....me estoy volviendo loco...

Lo que quiero es una fila de 4 divs que contendran algo (puede ser imagenes con links hacia algun lado), es decir que haciendo flotar los divs a la izquierda y repitiendo debajo tantas filas como sea necesario, tendria 4 columnas y n filas de estos divs. A los mismos les pongo un margen todo alrededor para separarlos entre si.

La idea es que estos 4 divs se vean perfectamente en el ancho de una pantalla ancha de 1920x1080, y por supuesto los quiero centrados en la pantalla (es decir en el body, el cual tiene un width de 100%), y al mismo tiempo la pagina se adapte a cualquier resolucion de pantalla inferior, mostrando 3 columnas de divs cuando no entren los 4, pero sigan aun viendose centrados (por supuesto) y llegado el caso si la pantalla sigue achicandose se veran 2 o 1, pero siempre centrados en el ancho total de la pantalla.

Ahora bien este seria my html:

<html>
<head>
<title>Documento sin título</title>
<link href="CSS/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>

<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>

</body>
</html>

Y este seria el css:

* {
margin:0px;
padding:0px;
}

body {
width:100%;
text-align:center;
}

.caja {
width:410px;
height:350px;
margin:15px;
text-align:left;
border:#333 solid 1px;
border-radius:10px;
position:relative;
float:left;
}


No aparecen centrados, y no puedo encontrar cual es la forma de hacerlo. Lo de envolver todo en un wrapper tampoco me sirvio, ya que al darle un ancho fijo al wrapper, cuando se achica la pantalla y ya no se ven los 4 sino 3, o 2 o 1 ya dejan de estar centrados.
Se agradece mucho cualquier ayuda.
  #2 (permalink)  
Antiguo 13/09/2012, 10:33
Avatar de jcorrea  
Fecha de Ingreso: febrero-2012
Ubicación: Bogota
Mensajes: 43
Antigüedad: 12 años, 1 mes
Puntos: 7
Respuesta: Centrar 2 o mas divs horizontalmente

Hola, yo creo que mejor pon todos los divs dentro de un div el cual llamaremos contenedor y le pones el siguiente estilo

Código:
 #contenedor{
 width:1770px;
 margin:0 auto;
 }
Saludos
__________________
www.ofitools.com
| En la nube - Soluciones Tecnológicas - Diseño Web - Consultoria Especializada
  #3 (permalink)  
Antiguo 13/09/2012, 11:00
 
Fecha de Ingreso: abril-2009
Mensajes: 35
Antigüedad: 14 años, 11 meses
Puntos: 1
Respuesta: Centrar 2 o mas divs horizontalmente

Amplio un poco en caso que nadie me entendio lo que quiero hacer... Segui trabajando en la pagina y dentro del footer, tengo varios elementos que hacen exactamente lo que quiero que hagan


El nuevo HTML:

<html>
<head>
<title>Documento sin título</title>
<link href="CSS/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="header"><img src="images/imagen1.jpg" width="298" height="300" /></div>
<div id="logo"><img src="images/logo.png" width="373" height="208" /></div>

<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>

<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>

<div id="footer">

<h2>No te subscribiste aún?, Unete ahora!</h2>

<p>Donec est dolor, pharetra ac consectetur vel, pretium nec dui. Duis dignissim viverra nisi vitae molestie. <br> Proin pulvinar accumsan leo, id rutrum dui consequat quis. Sed at risus quis eros venenatis semper. Quisque neque tellus, dignissim sed ac nunc. Phasellus vitae tellus metus nulla</p>


<p>Para mayor información o cualquier consulta por favor visita a Cachito | Pedrito, nuestros agentes autorizados de ventas.</p>

<p>Politica de Privacidad | Terminos y Condiciones | Webmasters | Contactanos</p></div>

</body>
</html>

Y el nuevo CSS:

* {
margin:0px;
padding:0px;
}

body {
width:100%;
text-align:center;
}

#header {
width:100%;
border-bottom:#666 solid 1px;
text-align:left;
margin-bottom:40px;
}

#logo {
width:373px;
height:208px;
position:absolute;
top:80px;
left:170px;
border:none;
}

.caja {
width:410px;
height:350px;
margin:15px;
text-align:center;
border:#333 solid 1px;
border-radius:10px;
position:relative;
float:left;
}

#footer {
width:100%;
margin-top:30px;
margin-bottom:30px;
text-align:center;
position:relative;
float:left;}

#footer h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:60px;
margin:auto;
padding-top:20px;
padding-bottom:40px;
}

#footer p {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
margin:auto;
padding:20px 0px;
}


Para apreciar lo que intento decir hagan lo siguiente: Click en el boton "restaurar" de tu navegador. Una vez que la ventana del mismo se achico arrastrar con el mouse de un extremo para hacerla mas angosta. Veran que todo lo que esta incluido en el "footer" acompaña dicho movimiento manteniendose centrado en todo momento. No asi las cajas del body, que si bien se van "apilando" abajo cuando comienza a haber menos espacio, nunca quedan centradas en el body.

Entiendo que esto es porque en el footer se trata siempre de un solo elemento h2, o p y no tienen la propiedad float:left. En el caso de las cajas pasa todo lo contrario, tienen la propiedad float:left (por eso justamente flotan a la izquierdan y no se centran) pero si no pusiera esa propiedad apareceria todas una abjo de otra y no ocupando todo el ancho del body como yo quiero.

Ahi es donde me perdi y no se como resolverlo.

Bueno nuevamente muchas gracias por leer, y si se les ocurre cualquier cosa sera muy apreciado.
  #4 (permalink)  
Antiguo 13/09/2012, 11:12
 
Fecha de Ingreso: abril-2009
Mensajes: 35
Antigüedad: 14 años, 11 meses
Puntos: 1
Respuesta: Centrar 2 o mas divs horizontalmente

Cita:
Iniciado por jcorrea Ver Mensaje
Hola, yo creo que mejor pon todos los divs dentro de un div el cual llamaremos contenedor y le pones el siguiente estilo

Código:
 #contenedor{
 width:1770px;
 margin:0 auto;
 }
Saludos
Hola jcorrea:

Primero que nada gracias por tu respuesta.

El problema con esa solucion es que solo funciona para centrar el contenedor con respecto al body. En tanto las cajas como caben "justo" en el ancho del contenedor parecen estar centradas. Hasta que comenzas a achicar la ventana del navegador y esta comienza a ser mas estrecha.

Ahi como el contenedor tiene un ancho fijo, ya dejan de verse las cajas que no entran en el ancho de la pantalla y te aparece la molesta barra de scroll horizontal.

No es eso lo que quiero. Alguna otra idea? :)
  #5 (permalink)  
Antiguo 13/09/2012, 11:32
Avatar de jcorrea  
Fecha de Ingreso: febrero-2012
Ubicación: Bogota
Mensajes: 43
Antigüedad: 12 años, 1 mes
Puntos: 7
Respuesta: Centrar 2 o mas divs horizontalmente

Hola, no entiendo si lo que quieres es que se achiquen los divs (cajas) o que solo cambie de tamaño del contenedor con respecto a la ventana y si ese es el caso esta seria la solucion.

#contenedor{
max-width:1770px;
min-width:440px;
margin:0 auto;
}

la cual daria un ancho max y minimo al contenedor, manteniendo el tamaño fijo de los divs (cajas)
__________________
www.ofitools.com
| En la nube - Soluciones Tecnológicas - Diseño Web - Consultoria Especializada
  #6 (permalink)  
Antiguo 13/09/2012, 12:01
 
Fecha de Ingreso: abril-2009
Mensajes: 35
Antigüedad: 14 años, 11 meses
Puntos: 1
Respuesta: Centrar 2 o mas divs horizontalmente

Cita:
Iniciado por jcorrea Ver Mensaje
Hola, no entiendo si lo que quieres es que se achiquen los divs (cajas) o que solo cambie de tamaño del contenedor con respecto a la ventana y si ese es el caso esta seria la solucion.

#contenedor{
max-width:1770px;
min-width:440px;
margin:0 auto;
}

la cual daria un ancho max y minimo al contenedor, manteniendo el tamaño fijo de los divs (cajas)
Bueno, eso es lo mas cerca que estuve de lograrlo... :) Ya lo habia probado y te explico exactamente cual es el problema con esa solucion.

Cuando la pagina esta maximizada en una pantalla de 1920 de ancho se ve perfectamente centrado todo. Sin embargo si te fijas y haces la comprobacion que explico en el post anterior, estirando y achicando la ventana dentro de la pantalla, cuando esta se hace demasiado angosta para mostrar las 4 cajas, la cuarta "cae" a una segunda fila y las columnas de cajas ya pasan a ser de 3, correcto? Bien, ahi dejan de estar centradas esas 3 cajas y vuelven a flotar a la izquierda.

Yo lo que quiero es que cuando la cuarta caja cae por no caber en el ancho de la pantalla, las 3 filas que quedan esten igualmente centradas, y que lo mismo pase cuando quedan 2 columnas de cajas y luego cuando queda solo 1, siempre centrado.

Este comportamiento es el que hace el footer, (si es que armaste el archivo y lo viste) No importa cual sea el ancho de la pantalla, a medida que vas estirandola o achicandola, ajusta automaticamente y se mantiene centrado todo el tiempo.

Quiza si no armaron el archivo y lo vieron, o incluso si no tienen una pantalla de 1920 px de ancho no vean lo que quiero decir.

La idea es que independientemente del ancho de tu pantalla, no importa la cantidad de cajas que quepan en dicho ancho, sean 4, 3, 2, 1, o 20, estas queden siempre SIEMPRE centradas, y que el espacio sobrante se raparta proporcionalmente a derecha e izquierda.

Creo que a esto le llaman diseño liquido.

Realmente te agradezco tu interes en ayudarme. Sigamos pensando...

Se que se puede porque lo he visto, lo que tengo que averiguar es como hacerlo.
Nuevamente muchas gracias.
  #7 (permalink)  
Antiguo 13/09/2012, 12:54
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Centrar 2 o mas divs horizontalmente

Lo que quieres es que .caja esté centrado en #contenedor, y #contenedor en body. Es más fácil de explicar que todo eso.

No es exactamente un diseño liquido, ya que las medidas de los diseños líquidos son siempre porcentuales.

No sé si se podrá hacer sólo con CSS. Voy a ver si sale algo.
__________________
(:
  #8 (permalink)  
Antiguo 13/09/2012, 13:10
 
Fecha de Ingreso: abril-2009
Mensajes: 35
Antigüedad: 14 años, 11 meses
Puntos: 1
Respuesta: Centrar 2 o mas divs horizontalmente

Cita:
Iniciado por Bonez Ver Mensaje
Lo que quieres es que .caja esté centrado en #contenedor, y #contenedor en body. Es más fácil de explicar que todo eso.

No es exactamente un diseño liquido, ya que las medidas de los diseños líquidos son siempre porcentuales.

No sé si se podrá hacer sólo con CSS. Voy a ver si sale algo.
Bonez:

No se si exactamente que ".caja este centrado en #contenedor y #contenedor en body"... De hecho ya comprobe que #contenedor no sirve para nada, ya que si le pongo widht fijo al achicar me pone scroll bar horizontal (que no quiero) y si le pongo width min y max, solo da la apariencia de estar centrado para el max que le pongo, pero deja de estarlo al achicar el ancho de la pantalla.

Si esa hubiera sido la respuesta todo bien, pero al no aportar una solucion, seria lo mismo obviar el contenedor y centrar directamente en el body, que para el caso es lo mismo.
La idea es hacerlo en porcentuales como tu dices, pero solo en el body puedo establecer 100% de ancho, de hecho es asi. Pero las cajas necesito que sean de un tamaño fijo. Lo que necesito que sea liquido es el espacio a derecha e izquierda de las mismas, para que este se "nivele" en partes iguales mostrando centradas la cantidad maxima de cajas que quepan en el ancho de pantalla. Se entiende?

Gracias por ayudar.
  #9 (permalink)  
Antiguo 13/09/2012, 13:14
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Centrar 2 o mas divs horizontalmente

Si si te entiendo. Que las cajas siempre estén centradas en relación al ancho del navegador, aunque no quepan y se vayan para abajo, pero que sigan centradas.
__________________
(:
  #10 (permalink)  
Antiguo 13/09/2012, 13:17
 
Fecha de Ingreso: abril-2009
Mensajes: 35
Antigüedad: 14 años, 11 meses
Puntos: 1
Respuesta: Centrar 2 o mas divs horizontalmente

Cita:
Iniciado por Bonez Ver Mensaje
Si si te entiendo. Que las cajas siempre estén centradas en relación al ancho del navegador, aunque no quepan y se vayan para abajo, pero que sigan centradas.
Exactamente. De hecho todo lo que esta dentro de #footer tiene ese comportamiento. Con la salvedad de que a nada de eso le he puesto float:left (porque no fue necesario)

En el caso de las cajas si necesito hacerlo, de otro modo si quedarian centradas pero se irian todas en una fila de arriba hacia abajo...ninguna de las 2 cosas es la deseada...asi que tengo que seguir pensando...Mientras sigo con otras cosas.... Y gracias por la colaboracion.
  #11 (permalink)  
Antiguo 13/09/2012, 21:49
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Centrar 2 o mas divs horizontalmente

Pues ya estaba casi seguro de que no se podía hacer cuando recordé una cosa que vi donde Chris Coyier de casualidad (vamos, que andaba aburrido ese día )

Se llaman Media Queries. Son una especie de condicionales, como en programación if-then-else, pero algo más simples. Seguramente que luego alguien que sepa más que nosotros nos dirá bien lo que son.

No te quitas de poner un contenedor (#cajon) a las capas flotantes. Pero ese contenedor lo que hace es tomar diferentes medidas según el max-width del navegador y así siempre quedarán centrados las capas internas. Es una especie de diseño con medidas fijas pero flexible.

Te dejo el trabajo de adaptar tus medidas.

Código HTML:
Ver original
  1. <style type="text/css">
  2. * { margon: 0; padding: 0; }
  3.  
  4.  
  5. #cajon {
  6.     width: 100%;
  7.     margin: 0 auto;
  8. }
  9.    
  10. @media (max-width:1999px) {
  11.     #cajon {
  12.         width: 1800px;
  13.     }
  14. }
  15.  
  16. @media (max-width:1799px) {
  17.     #cajon {
  18.         width: 1600px;
  19.     }
  20. }
  21.  
  22. @media (max-width:1599px) {
  23.     #cajon {
  24.         width: 1400px;
  25.     }
  26. }
  27.  
  28. @media (max-width:1399px) {
  29.     #cajon {
  30.         width: 1200px;
  31.     }
  32. }
  33.  
  34. @media (max-width:1199px) {
  35.     #cajon {
  36.         width: 1000px;
  37.     }
  38. }
  39.  
  40. @media (max-width:999px) {
  41.     #cajon {
  42.         width: 800px;
  43.     }
  44. }
  45.  
  46. @media (max-width:799px) {
  47.     #cajon {
  48.         width: 600px;
  49.     }
  50. }
  51.  
  52. @media (max-width:599px) {
  53.     #cajon {
  54.         width: 400px;
  55.     }
  56. }
  57.  
  58. #cajon div {
  59.     width: 198px;
  60.     height: 350px;
  61.     border: #333 solid 1px;
  62.     float: left;
  63. }
  64. </head>
  65.    
  66.     <div id="cajon">
  67.    
  68.         <div></div>
  69.         <div></div>
  70.         <div></div>
  71.         <div></div>
  72.        
  73.         <div></div>
  74.         <div></div>
  75.         <div></div>
  76.         <div></div>
  77.        
  78.         <div></div>
  79.         <div></div>
  80.         <div></div>
  81.         <div></div>
  82.  
  83.     </div>
  84.  
  85. </body>
  86. </html>

Se puede ver funcionando aquí.
__________________
(:

Última edición por pzin; 13/09/2012 a las 21:58 Razón: Enlace
  #12 (permalink)  
Antiguo 14/09/2012, 11:39
 
Fecha de Ingreso: abril-2009
Mensajes: 35
Antigüedad: 14 años, 11 meses
Puntos: 1
Respuesta: Centrar 2 o mas divs horizontalmente

Un GENIO Bonez!!! La verdad que no conocia esa regla de CSS...Comence a trabajar con CSS hace relativamente poco y por lo visto me falta mucho por aprender todavia.

Muy agradecido por tu ayuda. Asunto solucionado!

Etiquetas: divs, horizontalmente, html, imagenes
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 23:30.