如何用标题对齐多张图像？

Question

我试图水平对齐4个图像，每个图像都有自己的标题，然后将其他4个图像完全对齐。

我是代码的新手，所以我只使用HTML和CSS。

.skill-bg {
  padding-bottom: 50px;
  padding-top: 50px;
  text-align: center;
  margin-left: 10%;
  margin-right: 10%;
}

.skills {
  column-count: 4;
  column-gap: 0;
  page-break-inside: avoid;
  break-inside: avoid-column;
  font-family: 'Poppins', sans-serif;
  justify-content: space-between;
}

.skills > img {
  display: flex;
  width: 100%;
}

@media (max-width: 768px) {
  .skills {
    column-count: 2
  }
}

<section class="skill-bg">
  <h2 align="center" class="column-title2">Hard Skills</h2>
  <div class="skills">
    <figure>
      <img src="https://dummyimage.com/300x300/110/100" alt="copywriting logo" width="100">
      <figcaption>Copywriting</figcaption>
    </figure>
    <figure>
      <img src="https://dummyimage.com/300x300/110/100" alt="graphic design logo" width="100">
      <figcaption>Graphic Design</figcaption>
    </figure>
    <figure>
      <img src="https://dummyimage.com/300x300/110/100" alt="user research logo" width="100">
      <figcaption>User Research</figcaption>
    </figure>
    <figure>
      <img src="https://dummyimage.com/300x300/110/100" alt="user testing logo" width="100">
      <figcaption>User Testing</figcaption>
    </figure>
  </div>
  <div class="skills">
    <figure>
      <img src="https://dummyimage.com/300x300/110/100" alt="html logo" width="100">
      <figcaption>HTML</figcaption>
    </figure>
    <figure>
      <img src="https://dummyimage.com/300x300/110/100" alt="css logo" width="100">
      <figcaption>CSS</figcaption>
    </figure>
    <figure>
      <img src="https://dummyimage.com/300x300/110/100" alt="prototyping logo" width="100">
      <figcaption>Prototyping</figcaption>
    </figure>
    <figure>
      <img src="https://dummyimage.com/300x300/110/100" alt="photography logo" width="100">
      <figcaption>Photography</figcaption>
    </figure>
  </div>
</section>

由于某种原因，该行中的第一张图像与其他3张图像不对齐。在移动设备上（在两列中显示），第一列有相同的问题。

非常感谢您的光临！

Answer 1

重置figure的默认上边距。

figure {
  margin-top: 0;
}

.skill-bg {
  padding-bottom: 50px;
  padding-top: 50px;
  text-align: center;
  margin-left: 10%;
  margin-right: 10%;
}

.skills {
  column-count: 4;
  column-gap: 0;
  page-break-inside: avoid;
  break-inside: avoid-column;
  font-family: 'Poppins', sans-serif;
  justify-content: space-between;
}

.skills>img {
  display: flex;
  width: 100%;
}

figure {
  margin-top: 0;
}

@media (max-width: 768px) {
  .skills {
    column-count: 2
  }
}

<section class="skill-bg">
  <h2 align="center" class="column-title2">Hard Skills</h2>
  <div class="skills">
    <figure>
      <img src="https://dummyimage.com/300x300/110/100" alt="copywriting logo" width="100">
      <figcaption>Copywriting</figcaption>
    </figure>
    <figure>
      <img src="https://dummyimage.com/300x300/110/100" alt="graphic design logo" width="100">
      <figcaption>Graphic Design</figcaption>
    </figure>
    <figure>
      <img src="https://dummyimage.com/300x300/110/100" alt="user research logo" width="100">
      <figcaption>User Research</figcaption>
    </figure>
    <figure>
      <img src="https://dummyimage.com/300x300/110/100" alt="user testing logo" width="100">
      <figcaption>User Testing</figcaption>
    </figure>
  </div>
  <div class="skills">
    <figure>
      <img src="https://dummyimage.com/300x300/110/100" alt="html logo" width="100">
      <figcaption>HTML</figcaption>
    </figure>
    <figure>
      <img src="https://dummyimage.com/300x300/110/100" alt="css logo" width="100">
      <figcaption>CSS</figcaption>
    </figure>
    <figure>
      <img src="https://dummyimage.com/300x300/110/100" alt="prototyping logo" width="100">
      <figcaption>Prototyping</figcaption>
    </figure>
    <figure>
      <img src="https://dummyimage.com/300x300/110/100" alt="photography logo" width="100">
      <figcaption>Photography</figcaption>
    </figure>
  </div>
</section>