Foros del Web » Creando para Internet » CSS »

¿ Como centrar varios DIV dentro de otro DIV ?

Estas en el tema de ¿ Como centrar varios DIV dentro de otro DIV ? en el foro de CSS en Foros del Web. Hola! Tengo varias capas dentro de otra capa de 900px de ancho. Me gustaría que las capas estuvieran centradas como indico en el dibujo: http://imageshack.us/photo/my-images...ntradodiv.jpg/ ...
  #1 (permalink)  
Antiguo 03/06/2011, 08:40
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.022
Antigüedad: 14 años
Puntos: 16
¿ Como centrar varios DIV dentro de otro DIV ?

Hola!

Tengo varias capas dentro de otra capa de 900px de ancho.

Me gustaría que las capas estuvieran centradas como indico en el dibujo:
http://imageshack.us/photo/my-images...ntradodiv.jpg/

A ver si alguien da con la solución!

Un saludo y gracias de antemano!!
  #2 (permalink)  
Antiguo 03/06/2011, 09:57
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 4 meses
Puntos: 153
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?

a tus divs internos poneles float:left; y listo el pollo.

Slds.-
  #3 (permalink)  
Antiguo 04/06/2011, 07:42
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.022
Antigüedad: 14 años
Puntos: 16
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?

Si pero hay un problema, si te fijas, el último div de la derecha debe estar totalmente alineado a la derecha..

Un saludo!
  #4 (permalink)  
Antiguo 04/06/2011, 07:48
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 4 meses
Puntos: 1010
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?

añadele margin hasta que se adapte a lo que quieres
  #5 (permalink)  
Antiguo 04/06/2011, 09:45
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.022
Antigüedad: 14 años
Puntos: 16
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?

si pero mi intención es que definiendo el estilo para una sola capa hija se centren automáticamente de la manera que describo en la imagen, si añado a dicha capa, por ejemplo, margin-right:30px, el "tercer" div no se situará totalmente a la derecha...

Gracias de antemano!!
  #6 (permalink)  
Antiguo 04/06/2011, 10:49
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 4 meses
Puntos: 538
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?

Eso no es centrar varias cajas en su contenedor, sino una distribución en filas de tres.

¿El nº de hijos es conocido y siempre los mismos? ¿se generan dinámicamente?
¿Es una página html pura o programada? ¿Qué lenguaje?
¿Las medidas de los hijos es uniforme y conocida o a saber en cada caso?
¿...?
¿...?*

Y no, con una sola clase no podrá obtener resultados distintos (especialmente en lo que a márgenes o colocaciones se refiere).

*¿...? = cuanta más información mejor, especialmente los códigos (css+html generado).
  #7 (permalink)  
Antiguo 04/06/2011, 12:34
Avatar de Hurieta  
Fecha de Ingreso: enero-2011
Mensajes: 27
Antigüedad: 6 años, 8 meses
Puntos: 2
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?

Y no lo podes arreglar con tablas... osea vos aparentemente queres poner fotos... usa tablas
  #8 (permalink)  
Antiguo 06/06/2011, 01:33
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.022
Antigüedad: 14 años
Puntos: 16
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?

Hurieta, si pero representa que para maquetar es preferible utilizar css y DIV...

Kseso te dejo el código:

1- LA CLASE CSS:

.recuadro_fotos {
border: 1px solid #CCCCCC;
width: 140px;
height: 105px;
}



2- EL CÓDIGO HTML:

<div style="float:left; margin-right: 24px; margin-bottom: 24px;">
<div class="recuadro_fotos">
<img src="imagenes/<?php echo $imagen ?>" />
</div>
</div>

Saludos!!
  #9 (permalink)  
Antiguo 06/06/2011, 04:10
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 4 meses
Puntos: 1010
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?

Cita:
Iniciado por davidj Ver Mensaje
Hurieta, si pero representa que para maquetar es preferible utilizar css y DIV...
supongo que con tablas se refería a esto
  #10 (permalink)  
Antiguo 06/06/2011, 06:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 4 meses
Puntos: 538
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?

@davidj
Gracias por los códigos. Pero seguimos desconociendo todo lo planteado en #6
  #11 (permalink)  
Antiguo 06/06/2011, 07:17
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.022
Antigüedad: 14 años
Puntos: 16
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?

Cita:
Iniciado por kseso? Ver Mensaje
Eso no es centrar varias cajas en su contenedor, sino una distribución en filas de tres.

¿El nº de hijos es conocido y siempre los mismos? ¿se generan dinámicamente?
¿Es una página html pura o programada? ¿Qué lenguaje?
¿Las medidas de los hijos es uniforme y conocida o a saber en cada caso?
¿...?
¿...?*

Y no, con una sola clase no podrá obtener resultados distintos (especialmente en lo que a márgenes o colocaciones se refiere).

*¿...? = cuanta más información mejor, especialmente los códigos (css+html generado).

- El no. de hijos es indeterminado, pueden haber 1,2,3,4,5,6,7 etc etc..
- Es una página html pura y dura. Con css, html y php.
- Como se ve en la clase, los hijos tienen unas medidas concretas de 140x105

Saludos!
  #12 (permalink)  
Antiguo 06/06/2011, 07:33
Avatar de Ventru3  
Fecha de Ingreso: noviembre-2010
Ubicación: Disneylandia
Mensajes: 86
Antigüedad: 6 años, 10 meses
Puntos: 13
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?

Aprovechando el código que hice antes en otro tema, tengo algo para ti

Código HTML:
Ver original
  1. <div id="wrapper">
  2.         <div id="all-content">
  3.         <div id="content1">
  4.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.
  5.         </div>
  6.      
  7.         <div id="content1">
  8.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.
  9.         </div>
  10.  
  11.         <div id="content1">
  12.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.
  13.         </div>
  14.  
  15.         <div id="content1">
  16.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.
  17.         </div>
  18.  
  19.         <div id="content1">
  20.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.
  21.         </div>
  22.        
  23.         <div class="clear"></div>
  24.      
  25.         </div>
  26. </div>

Código CSS:
Ver original
  1. html, body {
  2.         height: 100%;
  3.         margin: 0px 0px 0px 0px;
  4.         padding: 0px 0px 0px 0px;
  5.     }
  6.      
  7.     #wrapper {
  8.         width: 900px;
  9.         height: 100%;
  10.         margin: 10px auto;
  11.     }
  12.      
  13.     #all-content {
  14.         width: 900px;
  15.         background-color: #d8d8d8;
  16.         border: 1px solid;
  17.     }
  18.      
  19.     #content1 {
  20.         float: left;
  21.         width: 240px;
  22.         margin: 10px 29px 10px 29px;
  23.         border: 1px solid;
  24.     }
  25.      
  26.     .clear {
  27.         clear: both;
  28.     }

Quedara siempre centrado si el ancho del div content1 es de 240px (como no has especificado que anchura tenían la he elegido yo), su borde es de 1px y el all-content tiene una anchura de 900px.

Son matemáticas puras.

MIERDA, acabo de ver tu ultimo post y si que les has dado un tamaño determinado

Bueno el div content quedaría así con tus medidas.
Código CSS:
Ver original
  1. #content1 {
  2.     float: left;
  3.     width: 140px;
  4.     height: 105px;
  5.     margin: 10px 79px 10px 79px;
  6.     border: 1px solid;
  7.     overflow: scroll; //Por si el contenido es demasiado grande
  8. }

Última edición por Ventru3; 06/06/2011 a las 07:43 Razón: Fallo en las medidas
  #13 (permalink)  
Antiguo 06/06/2011, 07:54
Avatar de inieva  
Fecha de Ingreso: noviembre-2009
Ubicación: Argentina
Mensajes: 34
Antigüedad: 7 años, 11 meses
Puntos: 18
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?

Eh... creo que esas matemáticas no es lo que buscaba davidj. Ahí lo único que estas haciendo es darle el a cada div el mismo margen izquierdo y derecho y buscar que las cosas te queden equilibradas. creo que no era la idea. Igualmente añadir un contenedor mas puede ser una solución sencilla. Por que no intentar algo asi:

Código:
#contenedor1{
width:900px;
margin:auto;
border:1px solid #000;
padding:6px 6px 0 6px;
overflow:hidden;
}


#contenedor2{
width:1146px;
}


.recuadro_fotos{
width: 140px;
height: 105px;
border:1px solid #000;
float:left;
margin-right:237px;
margin-bottom:6px;
}

Código:
<div id="contenedor1" >
	<div id="contenedor2" >
		<div class="recuadro_fotos">FOTO</div>
		<div class="recuadro_fotos">FOTO</div>
		<div class="recuadro_fotos">FOTO</div>
		<div class="recuadro_fotos">FOTO</div>
		<div class="recuadro_fotos">FOTO</div>
		<div class="recuadro_fotos">FOTO</div>
		<div class="recuadro_fotos">FOTO</div>
		<div class="recuadro_fotos">FOTO</div>
	</div>
</div>
Matemática y CSS



Saludos!
Nacho
[URL="http://www.ignacionieva.com.ar"]http://www.ignacionieva.com.ar[/URL]
  #14 (permalink)  
Antiguo 06/06/2011, 09:16
Avatar de Ventru3  
Fecha de Ingreso: noviembre-2010
Ubicación: Disneylandia
Mensajes: 86
Antigüedad: 6 años, 10 meses
Puntos: 13
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?

Pensaba que quería todo centrado dentro del primer contenedor (estéticamente es como queda bien).
  #15 (permalink)  
Antiguo 06/06/2011, 09:31
Avatar de inieva  
Fecha de Ingreso: noviembre-2009
Ubicación: Argentina
Mensajes: 34
Antigüedad: 7 años, 11 meses
Puntos: 18
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?

No sabemos que es lo que busca davidj estéticamente pero por la imagen que puso creo que lo que necesita es un div alineado a la izquierda uno en el centro y uno a la derecha. Por lo menos eso entiendo yo.
  #16 (permalink)  
Antiguo 06/06/2011, 09:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 4 meses
Puntos: 538
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?

Otra forma más semántica pero menos compatible con pseudonavegadores
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  4. <style type="text/css">
  5. * {margin:0; padding:0; position: relative;}
  6. html, body {
  7.   height: 100%;
  8.   font-family: garamond, serif;
  9.   font-size: 100%;
  10. }
  11. #contenedor {
  12.   background: #fe0 url(serv/css/estilos/reticula.gif) repeat;
  13.   width: 900px;
  14.   margin: 0 auto;
  15.   overflow: hidden;
  16. }
  17. #contenedor > div {
  18.   width:140px;
  19.   height: 105px;
  20.   background: #cacaca;
  21.   float: left;
  22.   margin: 10px;
  23. }
  24. #contenedor > div:nth-child(3n) {
  25.   float:right;
  26. }
  27. #contenedor > div:nth-child(3n-1) {
  28.   margin-left: 220px;
  29.   margin-right: 220px;
  30. }
  31. </head>
  32.     <div id="contenedor">
  33.         <div>1</div>
  34.         <div>2</div>
  35.         <div>3</div>
  36.         <div>4</div>
  37.         <div>5</div>
  38.     </div>
  39. </body>
  40. </html>

Y si de centrar múltiples elementos (desconocido su número a priori) se trata, sin necesidad de crear cajas innecesarias sería con el uso de text-align: center; y letter-spacing (para separar los hijos lateralmente) en el contenedor padre y a los div´s hijos declararlos como elementos de línea.

Inieva: buena ocurrencia el crear la segunda caja de tamaño mayor.
  #17 (permalink)  
Antiguo 06/06/2011, 10:00
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.022
Antigüedad: 14 años
Puntos: 16
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?

inieva, exacto, eso mismo es lo que busco...

kseso le daré un vistazo, aunque al ser menos compatible...
  #18 (permalink)  
Antiguo 06/06/2011, 14:24
Avatar de inieva  
Fecha de Ingreso: noviembre-2009
Ubicación: Argentina
Mensajes: 34
Antigüedad: 7 años, 11 meses
Puntos: 18
Respuesta: ¿ Como centrar varios DIV dentro de otro DIV ?

Me alegro de haber ayudado. Y gracias por el Karma!
__________________
http://www.ignacionieva.com.ar

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 03:07.