html - 如何根据强度图像将我的卡片和网格居中对齐？

Question

I want to center align my grid with respect to the strength heading, currently my grid is indented towards left side. Now I want to align with respect to strength heading.

考虑到我正在为网格元素使用翻转卡片，因此在任何情况下都不能干扰对齐。

呈现的 HTML 只是代码的一部分，考虑到我有 120 张翻转卡片，每行必须有 5 张卡片。附加的 css 用于翻转卡片和已创建的网格

另外请指出我哪里做错了。

.flip-card {
  border-style: hidden;
  background-color: transparent;
  width: 120px;
  height: 120px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #222e36ef;
  color: white;
  transform: rotateY(180deg);
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  justify-items: center;
  align-items: center;
  grid-gap: 15px;
}

<div style="width: 100%; text-align: center; padding: 5px 2px; clear: both;"><img alt="" src="img/heroes_thumbnail/heroes_thumbnail_large/strength.PNG" width="100" height="100" loading="lazy" />
  <h4>Strength</h4>
</div>
<div class="row">


  <!-- #str heroes -->
  <!-- #abaddon -->
  <div class="grid" style="align-self: center">
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;">
        </div>
        <div class="flip-card-back">
          </br>
          <p>WR : 50%</p>
          <p>PR : 50%</p>

        </div>
      </div>
    </div>

    <!-- #alchemist -->
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;">
        </div>
        <div class="flip-card-back">
          <h1>Win Rate</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
        </div>
      </div>
    </div>

    <!-- #axe -->
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;">
        </div>
        <div class="flip-card-back">
          <h1>Win Rate</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
        </div>
      </div>
    </div>



    <!-- #beastm -->
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;">
        </div>
        <div class="flip-card-back">
          <h1>Win Rate</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
        </div>
      </div>
    </div>



    <!-- #brewm -->
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src="img/heroes_thumbnail/heroes_thumbnail_large/brewmaster_lg.png" alt="Avatar" style="width:120px;height:120px;">
        </div>
        <div class="flip-card-back">
          <h1>Win Rate</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
        </div>
      </div>
    </div>
    <!-- #bb -->
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src="img/heroes_thumbnail/heroes_thumbnail_large/bristleback_lg.png" alt="Avatar" style="width:120px;height:120px;">
        </div>
        <div class="flip-card-back">
          <h1>Win Rate</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
        </div>
      </div>
    </div>

Answer 1

将 (div with h4-Strength) 移动到 (Div with class="grid")

如果你这样做，你需要添加样式 'grid-area: 1/1/1/7'， 因此带有 h4 的 Div 将占据整个第一行。

---

我必须说它似乎只在小屏幕上出现，我会向您推荐一种响应式的方式来做到这一点。 您只需要保留您的代码并替换

网格模板列:repeat(6, 1fr);

收件人:

grid-template-columns: repeat(auto-fill,minmax(170px,1fr));

这将使网格响应。

.flip-card {
  border-style: hidden;
  background-color: transparent;
  width: 120px;
  height: 120px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #222e36ef;
  color: white;
  transform: rotateY(180deg);
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  justify-items: center;
  align-items: center;
  grid-gap: 15px;
}

<div class="row">


  <!-- #str heroes -->
  <!-- #abaddon -->
  <div class="grid" style="align-self: center">
  <div style="width: 100%; text-align: center; padding: 5px 2px; clear: both; grid-area: 1 / 1 / 1 / 7;"><img alt="" src="img/heroes_thumbnail/heroes_thumbnail_large/strength.PNG" width="100" height="100" loading="lazy" />
  <h4>Strength</h4>
</div>
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;">
        </div>
        <div class="flip-card-back">
          </br>
          <p>WR : 50%</p>
          <p>PR : 50%</p>

        </div>
      </div>
    </div>

    <!-- #alchemist -->
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;">
        </div>
        <div class="flip-card-back">
          <h1>Win Rate</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
        </div>
      </div>
    </div>

    <!-- #axe -->
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;">
        </div>
        <div class="flip-card-back">
          <h1>Win Rate</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
        </div>
      </div>
    </div>



    <!-- #beastm -->
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;">
        </div>
        <div class="flip-card-back">
          <h1>Win Rate</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
        </div>
      </div>
    </div>



    <!-- #brewm -->
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src="img/heroes_thumbnail/heroes_thumbnail_large/brewmaster_lg.png" alt="Avatar" style="width:120px;height:120px;">
        </div>
        <div class="flip-card-back">
          <h1>Win Rate</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
        </div>
      </div>
    </div>
    <!-- #bb -->
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src="img/heroes_thumbnail/heroes_thumbnail_large/bristleback_lg.png" alt="Avatar" style="width:120px;height:120px;">
        </div>
        <div class="flip-card-back">
          <h1>Win Rate</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
        </div>
      </div>
    </div>