Foros del Web » Creando para Internet » CSS »

Centrar DIVS que están dentro de un Contenedor?

Estas en el tema de Centrar DIVS que están dentro de un Contenedor? en el foro de CSS en Foros del Web. Saludos amigos Tengo un Contenedor . Dentro de este Contenedor tengo varios DIVS pequeños al cual llamaremos: <DIV1>, <DIV2>, <DIV3> Es algo como esto: @import ...
  #1 (permalink)  
Antiguo 11/02/2010, 17:18
Avatar de ghidalgoram  
Fecha de Ingreso: marzo-2008
Ubicación: Costa Rica
Mensajes: 443
Antigüedad: 9 años, 9 meses
Puntos: 7
Centrar DIVS que están dentro de un Contenedor?

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:
Ver original
  1. CONTENEDOR
  2.            <DIV1>  </DIV1>          <DIV2>  </DIV2>        <DIV3>  </DIV3>
  3. </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.
__________________
Loading...
  #2 (permalink)  
Antiguo 11/02/2010, 17:31
 
Fecha de Ingreso: diciembre-2008
Mensajes: 454
Antigüedad: 9 años
Puntos: 2
Respuesta: Centrar DIVS que están dentro de un Contenedor?

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
  #3 (permalink)  
Antiguo 11/02/2010, 17:34
 
Fecha de Ingreso: diciembre-2008
Mensajes: 454
Antigüedad: 9 años
Puntos: 2
Respuesta: Centrar DIVS que están dentro de un Contenedor?

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
  #4 (permalink)  
Antiguo 12/02/2010, 01:36
DjX
 
Fecha de Ingreso: febrero-2010
Mensajes: 6
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Centrar DIVS que están dentro de un Contenedor?

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:
Ver original
  1. #contenedor {
  2.     text-align: left; //para que funcione en IE y que sea centrado
  3.     width: 900px; //ancho del contenedor
  4.     margin: auto; //para que funcione en FF entre otros
  5. }
  6.  
  7. #centrador {
  8.     width: 390px; // esto lo calculas sumando los width y los margin (izquierdo y derecho) de  los divs peque&#241;os
  9.     margin: 0 auto 0 auto;
  10. }
  11.  
  12. .centrado{
  13.     float:left;
  14.     text-align:left;
  15.     width: 100px;
  16.     height:100px;
  17.     margin: 15px;
  18.     background: blue;
  19. }

Código HTML:
Ver original
  1. <div id="contenedor">
  2. <div id="centrador">
  3.     <div class="centrado">
  4.     </div>
  5.     <div class="centrado">
  6.     </div>
  7.     <div class="centrado">
  8.     </div>
  9.     <div style="clear: both;"></div> <!-- este ultimo div sin contenido para que todo cuadre bien -->
  10. </div>
  11. </div>
  #5 (permalink)  
Antiguo 12/02/2010, 10:01
 
Fecha de Ingreso: diciembre-2008
Mensajes: 454
Antigüedad: 9 años
Puntos: 2
Respuesta: Centrar DIVS que están dentro de un Contenedor?

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
  #6 (permalink)  
Antiguo 12/02/2010, 18:58
 
Fecha de Ingreso: enero-2010
Mensajes: 9
Antigüedad: 7 años, 11 meses
Puntos: 0
Respuesta: Centrar DIVS que están dentro de un Contenedor?

gracias, yo necesitaba algo parecido hace unos dias!!!
  #7 (permalink)  
Antiguo 16/02/2010, 11:08
Avatar de ghidalgoram  
Fecha de Ingreso: marzo-2008
Ubicación: Costa Rica
Mensajes: 443
Antigüedad: 9 años, 9 meses
Puntos: 7
Respuesta: Centrar DIVS que están dentro de un Contenedor?

Gracias a todos.

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


Código HTML:
Ver original
  1. <div style="left:3%; position:relative; height:160px;">
  2.  
  3. ......
  4.  
  5. </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
__________________
Loading...

Etiquetas: centrar
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 00:49.