如何在 <div> 中对齐多个 <img>？ [复制]答案

【问题标题】：How to align more than one <img> inside a <div>? [duplicate]如何在 <div> 中对齐多个 <img>？ [复制]
【发布时间】：2020-08-31 04:10:09
【问题描述】：

我正在尝试将这 6 个图像与 div 对齐，但 CSS 会使其对齐，但他们知道它们在垂直线上，但我希望它们并排

div#menu-lixos img{
    margin-left: auto;
    margin-right: auto;
    display: block;
}

<div id="linha-laranja" class="linha-laranja">
        <h1 class="titulo">Materiais Recicláveis</h1>
        <h2 class="titulo2">histórias e propriedades</h2>
        <div id="menu-lixos" class="menu-lixos">
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
        </div>
    </div>

【问题讨论】：

你说你想要them side-by-side。你想做什么？你想让它们垂直居中吗？
您将它们设置为 display:block，为什么？此外，ID必须是唯一的

标签： html css

【解决方案1】：

尝试将display: flex; 添加到容器中，然后将flex“设置”设置为您想要的：

#linha-laranja #menu-lixos {
  display: flex;
  flex-direction: row;
  margin-right: auto;
  margin-left: auto;
}

<div id="linha-laranja" class="linha-laranja">
        <h1 class="titulo">Materiais Recicláveis</h1>
        <h2 class="titulo2">histórias e propriedades</h2>
        <div id="menu-lixos" class="menu-lixos">
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
            <img id="imagem" src="https://via.placeholder.com/150" />
        </div>
    </div>

然后，您可以添加 justify-content 和 align-items 属性以使间距正确。希望这对你有用！

【讨论】：

谢谢哥们！！但我只是添加了一个 text-align:center;这解决了我的问题 LOL

【解决方案2】：

将 CSS 属性 display:flex 添加到 .menu-lixos。这会将其子元素排成一行。然后你可以在 .menu-lixos 中添加一些后续的 CSS 属性——比如 justify-content 和 align-items——来获得正确的间距。

【讨论】：