图像在 div 中未正确居中答案

【问题标题】：Images not centering correctly in div图像在 div 中未正确居中
【发布时间】：2016-07-13 11:17:14
【问题描述】：

我有一个 div，其中连续 5 张图像，每张 300 像素。每边有 10 像素的边距，它们应该适合我 1600 像素宽的 div，但最后一张图片会碰到下一行。为什么不合适？经过一些试验和错误后，我发现当我将边距调整为 8.5 像素时，它们可以正确匹配，但这似乎没有意义？我没有任何其他边框、填充等。

这是我的 CSS：

#wrap {
    width: 1600px;
    margin: 0 auto;
    background-color: red;
}

.image {
    width: 300px;
    margin: 8px 10px 0 10px;
    vertical-align: text-top;
}

我的 HTML 看起来像这样：

<div id="wrap">
<div id="portfolio">
    <section>
        <a><img></a>
        <a><img></a>
        <a><img></a>
        <a><img></a>
        <a><img></a>
    </section>
    <section>
        <a><img></a>
        <a><img></a>
        <a><img></a>
        <a><img></a>
        <a><img></a>
    </section>
</div>

【问题讨论】：

你的html中没有.image类的元素？
为我们提供 jsfiddle。
您发布的 HTML 比您拥有的 CSS 多得多，因此我们很难在不做出假设的情况下告诉您您的问题是什么。您需要向我们提供与 HTML 相关的所有 CSS，以便我们可以告诉您问题所在。根据您发布的内容，不幸的是我们只是在猜测。
重复 - stackoverflow.com/questions/5078239/…

标签： html css center margins

【解决方案1】：

...但是最后一张图片碰到了下一行。为什么不是合适吗？

你遇到的问题是white-space margin。

内联元素的右/下边缘有一个小边距，这会使您的计算出错。

解决此问题的最简单方法可能是将wrap 设置为display: flex

【讨论】：

【解决方案2】：

问题原因：

在您的示例代码中，它实际上是将 achor 之间的空白变成空格（每个 4px 宽）。

因此，它实际上显示的不仅仅是anchor,anchor,anchor...，而是anchor,space,anchor,space... 等。

解决方案：

您可以仅使用图像（无锚点）并删除每个图像之间的空白，也可以将锚点向左浮动：

a { float: left; }

这是一个功能性的 JSfiddle，它表明通过删除 <img> 标记之间的锚点和空格，即使不浮动，它们也可以在同一行中：

https://jsfiddle.net/q6ubzp0t/

【讨论】：

谢谢！解释很有帮助 - 我不知道锚会添加 4px 空白（仍在学习！）我测试了你的建议，它们确实有效，但我无法删除锚，因为它们是链接，并且浮动弄乱了我的格式，因为我有各种尺寸的图像。我想保持我的 html 上的锚点对齐（而不是删除它们之间的空白），因为我需要能够快速找到图像并在需要时替换......我浏览了其他一些页面，这似乎有效： stackoverflow.com/a/18300727/6114800 但这是否被认为是“可接受的”代码？
实际上，我还尝试在我的#wrap 上设置 font-size: 0 ，这似乎比弄乱我的 html 效果更好。再次感谢大家！

【解决方案3】：

这是您的解决方案将此添加到您的样式中，它将正常工作

a{
  float: left;
}

【讨论】：

其实，虽然浮动在这里是一种选择，但它不会使元素居中。