¿ Como centrar varios DIV dentro de otro DIV ?

davidj · #1 (**permalink**) 03/06/2011, 08:40

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!!

DragonX · #2 (**permalink**) 03/06/2011, 09:57

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

Slds.-

davidj · #3 (**permalink**) 04/06/2011, 07:42

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

Un saludo!

IsaBelM · #4 (**permalink**) 04/06/2011, 07:48

añadele margin hasta que se adapte a lo que quieres

davidj · #5 (**permalink**) 04/06/2011, 09:45

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!!

kseso? · #6 (**permalink**) 04/06/2011, 10:49

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).

Hurieta · #7 (**permalink**) 04/06/2011, 12:34

Y no lo podes arreglar con tablas... osea vos aparentemente queres poner fotos... usa tablas

davidj · #8 (**permalink**) 06/06/2011, 01:33

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!!

IsaBelM · #9 (**permalink**) 06/06/2011, 04:10

Cita:

Iniciado por davidj

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

supongo que con tablas se refería a esto

kseso? · #10 (**permalink**) 06/06/2011, 06:46

@davidj
Gracias por los códigos. Pero seguimos desconociendo todo lo planteado en #6

davidj · #11 (**permalink**) 06/06/2011, 07:17

Cita:

Iniciado por kseso?

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!

Ventru3 · #12 (**permalink**) 06/06/2011, 07:33

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

Código HTML:

Ver original<div id="wrapper">
        <div id="all-content">
        <div id="content1">
            <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.
        </div>
     
        <div id="content1">
            <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.
        </div>
 
        <div id="content1">
            <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.
        </div>
 
        <div id="content1">
            <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.
        </div>
 
        <div id="content1">
            <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.
        </div>
       
        <div class="clear"></div>
     
        </div>
</div>

Código CSS:

Ver originalhtml, body {
        height: 100%;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }
     
    #wrapper {
        width: 900px;
        height: 100%;
        margin: 10px auto;
    }
     
    #all-content {
        width: 900px;
        background-color: #d8d8d8;
        border: 1px solid;
    }
     
    #content1 {
        float: left;
        width: 240px;
        margin: 10px 29px 10px 29px;
        border: 1px solid;
    }
     
    .clear {
        clear: both;
    }

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#content1 {
    float: left;
    width: 140px;
    height: 105px;
    margin: 10px 79px 10px 79px;
    border: 1px solid;
    overflow: scroll; //Por si el contenido es demasiado grande
}

inieva · #13 (**permalink**) 06/06/2011, 07:54

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]

Ventru3 · #14 (**permalink**) 06/06/2011, 09:16

Pensaba que quería todo centrado dentro del primer contenedor (estéticamente es como queda bien).

inieva · #15 (**permalink**) 06/06/2011, 09:31

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.

kseso? · #16 (**permalink**) 06/06/2011, 09:40

Otra forma más semántica pero menos compatible con pseudonavegadores

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>x</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
* {margin:0; padding:0; position: relative;}
html, body {
  height: 100%;
  font-family: garamond, serif;
  font-size: 100%;
}
#contenedor {
  background: #fe0 url(serv/css/estilos/reticula.gif) repeat;
  width: 900px;
  margin: 0 auto;
  overflow: hidden;
}
#contenedor > div {
  width:140px;
  height: 105px;
  background: #cacaca;
  float: left;
  margin: 10px;
}
#contenedor > div:nth-child(3n) {
  float:right;
}
#contenedor > div:nth-child(3n-1) {
  margin-left: 220px;
  margin-right: 220px;
}
</style>
</head>
<body>
    <div id="contenedor">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</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.

davidj · #17 (**permalink**) 06/06/2011, 10:00

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

kseso le daré un vistazo, aunque al ser menos compatible...

inieva · #18 (**permalink**) 06/06/2011, 14:24

Me alegro de haber ayudado. Y gracias por el Karma!