Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Problema al centrar divs flotantes en contenedor

CSS - Problema al centrar divs flotantes en contenedor

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Luis
Val: 5
Ha aumentado su posición en 19 puestos en CSS (en relación al último mes)
Gráfica de CSS

Problema al centrar divs flotantes en contenedor

Publicado por Luis (3 intervenciones) el 27/09/2016 15:26:52
Hola buenos días. Estoy aprendiendo css y me he topado con este problema, lo he intentado por horas pero no avanzo.
Tengo un contenedor donde le asigno max-width 1360px , x medio de un bucle alli muestro fotos de 255x195 px (tamaño fijo), que corresponden a una categoría elegida.
En cada fila entran hasta 6 fotos , pero segun la categoria puede haber solo 1 , 2 o 30 fotos . El problema es que las fotos son divs floats left , si les pongo un margen fijo mas o menos las puedo centrar ... pero lo que necesito es que asi sean 1 sola, 6 ,10 o 20 , queden centradas en horizontal a misma distancia unas de otras . Para el vertical uso un padding: 16px 0px;
Probé ponerle margin 0 auto; al contenedor pero logro que los divs salgan pegados a la izquierda , y necesito tengan un margen de espacio proporcional.

Muestro lo importante del codigo :


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
#muestra_articulos {

    display: block;
    background: orange;
    box-sizing: border-box;
    max-width: 1360px;
    margin:0 auto;
    margin-left: auto;
    margin-right: auto;
    padding: 16px 0px;
    min-height: 600px;
}
 
.productos {
    margin: 0px 11px;
    float:left;
    overflow: hidden;
 
}
 
.productos img {
  vertical-align: middle;
  text-align: center;
  width: 195px;
  height: 255px;
}
 
.producto_titulo {
    text-align: center;
    font-family: 'Muli', sans-serif;
    font-size: 0.85em;
    font-weight:800;
    color: #666;

}
 
.productodesc {
    text-align: center;
    font-family: 'Muli', sans-serif;
    font-size: 0.8em;
    font-weight: 300;
    margin-bottom: 30px;
    color:#666;

}
 
////////////////////////////////////////////////////////////////////////

bucle donde agrego las cajas /////////////////

////////////////////////////////////////////////////////////////////////

 
    <a href='<?php echo $id?>'>
          <div class="productos"><img src="<?php echo $imagen?>">
          <p class="producto_titulo"><?php echo $nombre?></p>
          <p class="productodesc"><?php echo $nombre?></p>
          </div>
    </a>

Agradeceré ayuda !!!!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Problema al centrar divs flotantes en contenedor

Publicado por xve (490 intervenciones) el 27/09/2016 22:05:52
Hola Luis, aqui te pongo un simple ejemplo para que lo veas... hay una sola imagen y queda centrada, si hay dos tambien, etc... siempre el contenido dentro del #contender estará centrado.

1
2
3
4
5
6
7
8
9
10
<div id="imagenes">
    <div id="contenedor">
        <img src="imagen.jpg">
    </div>
</div>
<style>
#imagenes {border:1px solid #808080;text-align:center;}

#contenedor {border:1px solid Red;display:inline-block;}

#contenedor img {border:1px solid Green;width:100px;height:100px;padding:5px;}

</style>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Luis
Val: 5
Ha aumentado su posición en 19 puestos en CSS (en relación al último mes)
Gráfica de CSS

Problema al centrar divs flotantes en contenedor

Publicado por Luis (3 intervenciones) el 28/09/2016 16:39:37
Muchas gracias xve , me funcionó !

Una consulta más, el tema es que pensé que estaba entendiendo medianamente css pero en la medida que busco más complejidad ,,, me entero que no es asi .
Tengo una estructura creo .. medianamente básica.

cuerpo central :que contiene a todos los divs.
filtro_articulos : una seccion con un unico select tipo desplegable donde elijo la categoria de las imagenes.
muestra_articulos: otra seccion debajo de la anterior que deberia contener todas las imagenes que muestro mediante un bucle php.
productos: div dentro del anterior (muestra_articulos) que contiene cada imagen y su descripcion (#producto_titulo y #productodesc.
Funciona correctamente, lo que noto es que por alguna razón que desconozco se perdió el div muestra_articulos, le puse color orange para ver si aparecía pero no . Se te ocurre q puede ser ? copio las propiedades de cada div :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
#cuerpo_central {

    width: 100%;
    background-color: #f5f5f5;

    float: left;
    padding: 1em;
    font-size: 1.2em;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    }
 
.filtro_articulos {
    clear: both;
    width: 100%;
    background-color: #f5f5f5;

    float: left;
    font-size: 1.2em;
    box-sizing: border-box;
/*    border: 1px solid blue;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
 
#muestra_articulos {

    clear: both;
    background: orange;
    text-align:center;
}
 
.productos {
    display:inline-block;
    float:left;
    overflow: hidden;
}
 
.productos img {
    width: 195px;
    height: 255px;
    padding: 11px;
}
 
.producto_titulo {
    text-align: center;
    font-family: 'Muli', sans-serif;
    font-size: 0.85em;
    font-weight:800;
    color: #666;

}
 
.productodesc {
    text-align: center;
    font-family: 'Muli', sans-serif;
    font-size: 0.8em;
    font-weight: 300;
    margin-bottom: 30px;
    color:#666;

}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Problema al centrar divs flotantes en contenedor

Publicado por xve (490 intervenciones) el 28/09/2016 20:33:05
Sin ver el código html, no se puede saber el porque... tendrías que montar un ejemplo como el que te puse, para poder probarlo y entenderlo bien...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Luis
Val: 5
Ha aumentado su posición en 19 puestos en CSS (en relación al último mes)
Gráfica de CSS

Problema al centrar divs flotantes en contenedor

Publicado por Luis (3 intervenciones) el 13/10/2016 18:19:10
Hola xve , gracias , la segunda pregunta que hice me di cuenta que era nada concreta ... aprendí a usar mejor la consola y pude ubicar donde quedó la capa, disculpa pero ha veces me trabo con esas cosas , mucha data junta .. manejo algo de css pero en la medida que avanzo entiendo que no sabía nada jaja.

Respecto a tu código de ayuda :

1
2
3
4
5
6
7
8
9
10
<div id="imagenes">
    <div id="contenedor">
        <img src="imagen.jpg">
    </div>
</div>
<style>
#imagenes {border:1px solid #808080;text-align:center;}

#contenedor {border:1px solid Red;display:inline-block;}

#contenedor img {border:1px solid Green;width:100px;height:100px;padding:5px;}

</style>


Me sirvió pero tengo un problema que no se como resolver.
Meto varios divs float en un contenedor al que le doy max-width:1240px; con la idea de que sea responsive . Lo que me ocurre es que las cajas o divs tienen un min-width: 160px , mas un borde de 1 px, total 162px; quedan centradas en el contenedor, obviamente a partir del centro .
Lo que quisiera es que esten centradas pero a la vez a la misma distancia horizontal unas de otras . Si les pongo un margin-left calculado , cuando achico y se baja algun div se empieza a complicar la alineación .
Hay alguna forma que se vaya recalculando el espacio horizontal entre los divs en la misma medida que cambia el ancho del contenedor ?

Gracias !!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar