Centrar DIVS que están dentro de un Contenedor?

[ghidalgoram]

Saludos amigos

Tengo un Contenedor.
Dentro de este Contenedor tengo varios DIVS pequeños al cual llamaremos:

<DIV1>, <DIV2>, <DIV3>


Es algo como esto:

Código HTML:

CONTENEDOR
           <DIV1>  </DIV1>          <DIV2>  </DIV2>        <DIV3>  </DIV3>
</CONTENEDOR>
 

Mediante CSS como puedo centrar esos DIVS pequeños ?

En este caso yo puse 3 DIVS pequeños, pero el CONTENEDOR dependiendo de ciertas circunstancias, pero podría llegar a tener desde 1 DIV a un máximo de 4.


Agradezco sus recomendaciones.

Saludos amigos.

[easy]

todo depende del tamaño que le des

pero sería algo asi

Código:

#contenedor {
text-align: left; //para que funcione en IE y que sea centrado
width: 900px; //ancho del contenedor
margin: auto; //para que funcione en FF entre otros
}

#div1 {
float:left;
text-align:left;
width: 300px;
height:100px;
margin: 0;
}
#div2 {
float:left;
text-align:left;
width: 300px;
height:100px;
margin: 0;
}
#div3 {
float:left;
text-align:left;
width: 300px;
height:100px;
margin: 0;
}

En HTML se veria asi:

Código HTML:

<div id="contenedor">
     <div id="div1">
     </div>
     <div id="div2">
     </div>
     <div id="div2">
     </div>
</div> 

espero te haya ayudado, saludos

[easy]

si quieres tener un solo div pero que fuese centrado con dimensiones más pequeñas, juega con los padding, no con margin, ya que IE 6 se comprta raro y te tocaría hacerle un hack :(

Código:

#div1 {
float:left;
text-align:left;
width: 300px;
height:100px;
margin: 0;
padding: 0 300px 0 300px; // alto 0, derecha 300px, abajo 0, izquierda 300px
}

saludos

[DjX]

Pues que yo sepa no se puede hacer sin modificar el css cada vez que añadas o elimines los divs pequeños, pero ya que van a estar variando pues puedes modificar esa propiedad cada vez, ya sea a mano o con php.

Le he robado un poco de código a easy para este ejemplo

Código CSS:

#contenedor {
    text-align: left; //para que funcione en IE y que sea centrado
    width: 900px; //ancho del contenedor
    margin: auto; //para que funcione en FF entre otros
}
 
#centrador {
    width: 390px; // esto lo calculas sumando los width y los margin (izquierdo y derecho) de  los divs pequeños
    margin: 0 auto 0 auto;
}
 
.centrado{
    float:left;
    text-align:left;
    width: 100px;
    height:100px;
    margin: 15px;
    background: blue;
}
 

Código HTML:

<div id="contenedor">
<div id="centrador">
    <div class="centrado">
    </div>
    <div class="centrado">
    </div>
    <div class="centrado">
    </div>
    <div style="clear: both;"></div> <!-- este ultimo div sin contenido para que todo cuadre bien -->
</div>
</div>
 

[easy]

tambien te funciona como lo dice DjX, pero recuerda algo, si le pones el margin:15px; el margin te lo aplica a: arriba(top), abajo(bottom), derecha(left) e izquierda (right).

si utilizas una medida en margin recuerda que debes especificarla para donde quieres el margin.

Sigo insisteiendo en que es mejor que utilices padding en lugar de margin ya que margin juega a veces malas pasadas en nuestro famoso y no amado IE

Saludos

[pGuerrerox]

gracias, yo necesitaba algo parecido hace unos dias!!!

[ghidalgoram]

Gracias a todos.

El problema, yo lo habia resulto antes de hacer este Post,, pero lo hice programandolo mediante PHP. Utilizo:

Código HTML:

<div style="left:3%; position:relative; height:160px;">
 
......
 
</div>
 

Ese valor de '3' lo cambio dinámicamente, dependiendo de los Divs qie se van a mostrar en cada página,,,sean 1,2,3,4 ó 5

Sin embargo, me interesé en hacerlo más rápido y por eso la pregunta en este foro. Voy a probar esos códigos.

Gracias a todos
saludos