我现在有一个非常菜鸟的问题,但我不明白,我如何才能从像这样的弹性盒中获得中心项目
.productos_Imagenes{
width: 150px;
border-width: 5px;
border-style: solid;
}
.contenedor_Linea_1{
display: block;
margin: 0 auto;
}
.contenedor_Linea_1_Sabores{
display: flex;
justify-content: center;
align-items:center;
margin: 0 auto;
}
.contenedor_Linea_1_Sabores_Contenedor{
display: block;
margin: 0 auto;
}
.linea_1_Tipos{
text-transform: uppercase;
font-size: 50px;
text-align: center;
}
<div class="contenedor_Linea_ 1">
<div>Linea de Productos 1</div>
<div>Sabores</div>
<div class="linea_1_Tipos">Frutales</div>
<div class="contenedor_Linea_1_Sabores">
<div class="contenedor_Linea_1_Sabores_Contenedor">
<img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\frutillas.png">
<img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\mango.png">
<img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\melon.png">
<img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\sandia.png">
<img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\naranja.png">
<img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\uva.png">
<img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\frambuesa.png">
<img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\frutos del bosque.png">
</div>
</div>
<div class="linea_1_Tipos"> No Frutales</div>
<div class="contenedor_Linea_1_Sabores">
<div class="contenedor_Linea_1_Sabores_Contenedor">
<img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\cafe.png">
<img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\vainilla.png">
<img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\whisky.png">
</div>
</div>
</div>
使用 Flexbox,您可以执行类似的操作 https://jsfiddle.net/k3bnsv24/18/。
我尝试重新创建您的案例。对于您来说,这意味着“.contenedor_Linea_1_Sabores_Contenedor”应该相当于“.container”
.contenedor_Linea_1_Sabores_Contenedor {
display: flex;
flex-wrap: wrap;
justify-content: center;
}