html - 试图将多个图像居中

Question

这一直是我在 xD 中的想法，基本上我试图将我的图像居中，但是在例如 imgTop 中引用的第一张图像似乎是中间图像，另一张在右边。我想将两者均匀居中的地方。提前致谢

#imageContainer {
  width: 100%;
  text-align: center;
}
.imgTop {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  width: 60px;
  height: 40px;
  padding-left: 85pt;
  padding-right: 85pt;
}
.imgBottom {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  width: 60px;
  height: 40px;
  padding-left: 85pt;
  padding-right: 85pt;
}

<div id="imageContainer">
  <div class="imgTop">
    <a class="imageSlot">
      <img src="src/gameImages/img3.jpg">
    </a>
  </div>
  <div class="imgTop">
    <a class="imageSlot">
      <img src="src/gameImages/img4.jpg">
    </a>
  </div>
</div>

<div id="imageContainer">
  <div class="imgBottom">
    <a class="imageSlot">
      <img src="src/gameImages/img4.jpg">
    </a>
  </div>
  <div class="imgBottom">
    <a class="imageSlot">
      <img src="src/gameImages/img3.jpg">
    </a>
  </div>
</div>

Answer 1

不确定我是否正确...但是您希望两张图片都位于中间而不是只有一张？所以我所做的是从 2 个 div 标签中制作 1 个并将它们放在一起。

<div id="imageContainer">
        <div class="imgTop">
            <a class="imageSlot"><img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png"></a>
            <a class="imageSlot"><img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png"></a>
        </div>
    </div>

    <div id="imageContainer">
        <div class="imgBottom">
            <a class="imageSlot"><img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png"></a>
            <a class="imageSlot"><img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png"></a>
        </div>
    </div>

这是我的 fiddle :https://jsfiddle.net/gswq55x2/