为什么内联块不适用于我的图像？

Question

在我的网站中，我试图让“display：inline-block”与我的图像一起使用，将它们放在一起，但它们仍然显示在彼此之上，并且由于某种原因稍微偏离中心。有什么帮助吗？

.inline {
  display: inline-block;
}

<div style="text-align:center" class="inline">
  <img src="https://dl.flathub.org/media/org/godotengine/Godot.desktop/f3bfa94e0d33cf1cec74d0406b86879c/icons/128x128@2/org.godotengine.Godot.desktop.png" width=25% class="rounded inline">
</div>
<div style="text-align:center" class="inline">
  <img src="https://dl.flathub.org/media/org/godotengine/Godot.desktop/f3bfa94e0d33cf1cec74d0406b86879c/icons/128x128@2/org.godotengine.Godot.desktop.png" width=25% class="rounded inline">
</div>

结果： 两个图像相互重叠，稍微偏离中心

我尝试将类放入图像中，这解决了偏离中心的问题，但它们仍然彼此重叠。 我还将这两个 div 放入另一个“父”div 中，但它什么也没做。 然后我只将类放入 div 中，这也没有解决任何问题。 这些都是为了解决问题。

*编辑：发现问题！我的浏览器太薄了，所以显示得很奇怪，但是我的 div 之间有一个间隙。现在正在尝试解决这个问题...

Answer 1

包含的

div

应具有以下属性：

"display: inline-block; text-align: center"

然后，您想要在父 div 内居中对齐的 div 也应该具有

display: inline-block