如何在Flexbox中垂直对齐不同高度的图片？

我希望所有图片在flexbox容器中居中显示，且每张图片的中心位于同一轴线上。作为前端新手，我尝试了多种方法但一小时仍未解决。我试过将图片设为inline-block并添加vertical-align: middle，但隐藏的radio元素还是影响了垂直对齐效果。

HTML代码 #

<body>
  <h3>Course</h3>
  <form class="mk8dx-entry-form">
    <div class="course-container">
      <div class="console-container">
        <div class="console-row">
          <label class="console-image-check">
            <input type="radio" name="console" value="SNES" onclick="snesCourses();">
            <div class="console-image">
              <img src="https://placehold.co/600x400" alt="Super Mario Kart">
            </div>
          </label>
          <label>
            <input type="radio" name="console" value="N64" onclick="n64Courses();">
            <div class="console-image">
              <img src="https://placehold.co/600x200" alt="Mario Kart 64">
            </div>
          </label>
          <label>
            <input type="radio" name="console" value="GBA" onclick="gbaCourses();">
            <div class="console-image">
              <img src="https://placehold.co/600x300" alt="Mario Kart Super Circuit">
            </div>
          </label>
          <label>
            <input type="radio" name="console" value="GCN" onclick="gcnCourses();">
            <div class="console-image">
              <img src="https://placehold.co/600x500" alt="Mario Kart Double Dash">
            </div>
          </label>
          <label>
            <input type="radio" name="console" value="DS" onclick="dsCourses();">
            <div class="console-image">
              <img src="https://placehold.co/600x400" alt="Mario Kart DS">
            </div>
          </label>
          <label class="console-image-check">
            <input type="radio" name="console" value="Wii" onclick="wiiCourses();">
            <div class="console-image">
              <img src="https://placehold.co/600x250" alt="Mario Kart Wii">
            </div>
          </label>
          <label>
            <input type="radio" name="console" value="3DS" onclick="mk7Courses();">
            <div class="console-image">
              <img src="https://placehold.co/600x400" alt="Mario Kart 7">
            </div>
          </label>
          <label>
            <input type="radio" name="console" value="Tour" onclick="tourCourses();">
            <div class="console-image">
              <img src="https://placehold.co/600x500" alt="Mario Kart Tour">
            </div>
          </label>
          <label>
            <input type="radio" name="console" value="MK8" onclick="mk8Courses();">
            <div class="console-image">
              <img src="https://placehold.co/600x400" alt="Mario Kart 8">
            </div>
          </label>
          <label>
            <input type="radio" name="console" value="Booster Courses" onclick="boosterCourses();">
            <div class="console-image">
              <img src="https://placehold.co/600x200" alt="Mario Kart 8 Deluxe Booster Courses">
            </div>
          </label>
        </div>
      </div>
    </div>
  </form>
</body>

原始CSS代码 #

.course-container {
    width: 60%;
    height: 300px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: black;
}

.console-container {
    height: 100%;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-around;
}

.console-row {
    display: flex;
    gap: 30px;
}

.console-row label {
    flex: 1;
}

.console-image img {
    cursor: pointer;
    display: block;
    width: 100%;
    object-fit: contain;
    opacity: 50%;
    transition: transform 250ms ease-in-out;

    &:hover {
        opacity: 80%;
        transition: opacity 250ms ease-in-out;
    }
}

input[type="radio"]{
    visibility: hidden;
    height: 0;
    width: 0;
  }

.console-row input[type=radio]:checked + .console-image img{
    opacity: 100%;
    transform: scale(1.1);
    filter: drop-shadow(0px 0px 10px hsla(0, 0%, 0%, 0.75));
    transition: transform 250ms ease-in-out, filter 250ms ease-in-out;
}

尝试修改的CSS代码 #

.console-image img {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    object-fit: contain;
    opacity: 50%;
    transition: transform 250ms ease-in-out;

    &:hover {
        opacity: 80%;
        transition: opacity 250ms ease-in-out;
    }
}

问题出在label元素的布局上：虽然上层容器加了align-items: center，但label本身是块级元素，内部radio和图片为正常流排列，radio即使隐藏仍会占据布局空间，导致图片无法在label内垂直居中。

只需修改两处CSS即可解决：

1. 优化radio的隐藏方式，用绝对定位彻底移出可视区域，避免影响布局：

input[type="radio"]{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

2. 让label成为flex容器，强制内部图片垂直居中：

.console-row label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

这样所有图片的中心会严格对齐同一轴线，同时radio的点击功能不受影响，hover和选中样式也能正常工作。

内容的提问来源于stack exchange，提问作者PsychedelicSeal