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

不确定我是否正确...但你想要两个picutres都在中间而不仅仅是一个？所以我做的是从2中制作1个div标签并将它们放在一起。

<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>

这是我的小提琴：https://jsfiddle.net/gswq55x2/

试图居中多个图像

1 个答案: