2023年7月27日 23:17:42go评论76阅读模式

英文:

How to center all img in css with flexbox

问题

我有一个非常初级的问题，但我不明白，如何使一个 flexbox 中的项目居中，就像这样：

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

.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;
}

英文:

i have a very noob question now, but I dont get it, how i can get center an item from a flexbox like this

.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;
}

&lt;div class=&quot;contenedor_Linea_ 1&quot;&gt;
    &lt;div&gt;Linea de Productos 1&lt;/div&gt;
    &lt;div&gt;Sabores&lt;/div&gt;
    &lt;div class=&quot;linea_1_Tipos&quot;&gt;Frutales&lt;/div&gt;
    &lt;div class=&quot;contenedor_Linea_1_Sabores&quot;&gt;
        &lt;div class=&quot;contenedor_Linea_1_Sabores_Contenedor&quot;&gt;
             &lt;img class=&quot;productos_Imagenes&quot; src=&quot;C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\frutillas.png&quot;&gt;
             &lt;img class=&quot;productos_Imagenes&quot; src=&quot;C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\mango.png&quot;&gt;
             &lt;img class=&quot;productos_Imagenes&quot; src=&quot;C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\melon.png&quot;&gt;
             &lt;img class=&quot;productos_Imagenes&quot; src=&quot;C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\sandia.png&quot;&gt;
             &lt;img class=&quot;productos_Imagenes&quot; src=&quot;C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\naranja.png&quot;&gt;
             &lt;img class=&quot;productos_Imagenes&quot; src=&quot;C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\uva.png&quot;&gt;
             &lt;img class=&quot;productos_Imagenes&quot; src=&quot;C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\frambuesa.png&quot;&gt;
             &lt;img class=&quot;productos_Imagenes&quot; src=&quot;C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\frutos del bosque.png&quot;&gt;
        &lt;/div&gt;    
    &lt;/div&gt;
    &lt;div class=&quot;linea_1_Tipos&quot;&gt; No Frutales&lt;/div&gt;
    &lt;div class=&quot;contenedor_Linea_1_Sabores&quot;&gt;
        &lt;div class=&quot;contenedor_Linea_1_Sabores_Contenedor&quot;&gt;
             &lt;img class=&quot;productos_Imagenes&quot; src=&quot;C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\cafe.png&quot;&gt;
             &lt;img class=&quot;productos_Imagenes&quot; src=&quot;C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\vainilla.png&quot;&gt;
             &lt;img class=&quot;productos_Imagenes&quot; src=&quot;C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\whisky.png&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

答案1

得分: 2

使用 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;
}

英文:

With flexbox, you could do something like https://jsfiddle.net/k3bnsv24/18/.

I tried to recreate your case. For you, it would mean that ".contenedor_Linea_1_Sabores_Contenedor" should be the equivalent of ".container"

    .contenedor_Linea_1_Sabores_Contenedor {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

答案2

得分: 1

使用边距：
```
img {
margin: auto;
}
```
覆盖您的图像：img { width: 100%; object-fit: cover;}

英文:

Try these:-

Using margin:
img { margin: auto; }
Cover you image: img { width: 100%; object-fit: cover;}

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何使用Flexbox在CSS中将所有图像居中。

问题

答案1

答案2

将v-row放在v-tab-item的末尾位置。

如何在另一张图像上放置一个透明图像（Tkinter）

CSS悬停高亮不覆盖父组件。

Use a background-image: linear-gradient (or image) with a container of divs where only the divs show the background and the space around remains white

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论