图片未在 div 中正确居中

Question

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

这是我的 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>

Answer 1

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

a{
  float: left;
}

Answer 2

... but the last image is bumping to the next line. Why is it not fitting?

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

行内元素的 right/bottom 边缘有小边距，导致计算错误。

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

Answer 3

问题原因：

在您的示例代码中，它实际上是将锚点之间的白色 space 变成 spaces（每个锚点宽 4px）。

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

解法：

您可以仅使用图像（无锚点）并移除每个图像之间的白色space，或者您可以将锚点向左浮动：

a { float: left; }

这是一个功能性的 JSfiddle，它显示通过删除 <img> 标签之间的锚点和 space，它允许它们全部在同一行中，即使没有浮动：

https://jsfiddle.net/q6ubzp0t/

图片未在 div 中正确居中

Images not centering correctly in div

html

css

center

margins