如何堆叠两个图像并居中

Question

我希望图像居中，我需要在中心将两张图像叠加在一起。我左边有徽标，右边有导航栏

＆＃13;

＆＃13;

.projImg {
  margin: 0;
}

.projImg img {
  display: block;
}

＆＃13;

  <div class="mainProj">
    <main>
        <figure class="projImg">
            <img src="https://i.imgur.com/UiAiZYm.jpg" alt="projectImage1">
        </figure>

        <figure class="projImg">
            <img src="https://i.imgur.com/4F4Agjz.jpg" alt="projectImage2">
        </figure>

        <figure class="projImg">
            <img src="https://i.imgur.com/GncQ8QI.jpg" alt="projectImage3">
        </figure>

        <figure class="projImg">
            <img src="https://i.imgur.com/MGkSJza.jpg" alt="projectImage4">
        </figure>
    </main>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用以下代码......

.projImg {
  text-align:center;
  width: 50%;
  float:left;
  margin:0;
}

.projImg img {
  display: inline-block;
  width: 100%;
}

  <div class="mainProj">
    <main>
        <figure class="projImg">
            <img src="https://i.imgur.com/UiAiZYm.jpg" alt="projectImage1">
        </figure>

        <figure class="projImg">
            <img src="https://i.imgur.com/4F4Agjz.jpg" alt="projectImage2">
        </figure>

        <figure class="projImg">
            <img src="https://i.imgur.com/GncQ8QI.jpg" alt="projectImage3">
        </figure>

        <figure class="projImg">
            <img src="https://i.imgur.com/MGkSJza.jpg" alt="projectImage4">
        </figure>
    </main>
  </div>

Answer 2

.projImg {
  margin: 0;
}

.projImg img {
  display: block;
  margin: auto;

}

使用此CSS代码集中您的图片。