在页面中心并排显示图像答案

【问题标题】：display images in the center of the page side by side在页面中心并排显示图像
【发布时间】：2017-04-19 04:04:44
【问题描述】：

我有以下代码，它会从数据库中加载所有图像路径：

    <% sweet.forEach(function (item) { %>
    "img id="pictureproduct" src="<%= item.picture%>"/>
    <% }); %>

我尝试了我所知道的一切来使图像加载如下：

图片应加载到页面中心
图像应并排
只能在一行中并排加载 4 或 5 张图片

你能帮我用 CSS 做这件事吗？

【问题讨论】：

将它们浮动在一个居中的容器中。使用弹性盒子。
欢迎来到Stack Overflow，弗拉维。参考：我尝试了我所知道的一切......。阅读this，您将了解更多。您还应该考虑创建一个minimal reproducible example，这将使我们能够看到您到目前为止所拥有的内容、最终的html 标记的外观以及您到目前为止所做的尝试。

标签： javascript html css node.js

【解决方案1】：

将您的图像放入弹性容器（弹性盒）中。创建一个 div <div class="images-parent"> 并将您的图像放入：

.images-parent{
   display:flex;
   justify-content:center;
}

【讨论】：

您应该避免回答没有任何研究成果的问题。您正在鼓励 OP 和其他用户提出更多低质量的问题。详情请见How to Answer。
但我没有发现这个问题离题。解释足够清晰，您的链接是用于使一个元素居中，也许他不能将其用于多个元素居中。
首先，我没有说这是题外话。其次，根据经验，每当您必须做出假设才能回答它时，这个问题都是低质量的。在这种情况下，当您不知道标记的样子时，如何提供CSS？
当你必须做出假设才能回答它时，问题就跑题了。这很有趣，但没有明确的规律。我们已经看到了许多没有任何代码的问题，但没有超过 100 个赞。
关于我在问题下的评论中提供的链接，花点时间阅读那里列出的所有技术，它可能会有所帮助。那是SO Documentation，这不是随机的问题/答案。这是一个测试版功能，许多有经验的用户都亲自挑选了最佳答案，以使Stack Overflow 比现在更有用。

【解决方案2】：

试试这个：

.images-parent {
    position: absolute;
    top: 50%;
    margin-top: -100px;
    height: 200px;
    text-align: center;
}

.images-parent img {
    height: 100%;
    margin: 0 .5em;
}

如果你想改变图像的高度，你也必须改变 margin-top。

【讨论】：

绝对定位似乎是一个糟糕的解决方案，以及需要设置的所有特定值。这可以在不那么严格的情况下完成。
@hungerstar 绝对定位没什么问题，具体数值是支持老浏览器的最佳选择。如果您不关心旧浏览器，您总是可以使用转换。无需投票。