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

Question

尝试让所有图像都在弹性框中居中，并且所有图像也彼此内联（也就是每个图像的中心沿着同一轴）。我知道这可能非常基本，但我对此很陌生，并且已经尝试不同的排列一个小时了。

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

.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;
}

这是 Codepen 模型的链接

我试过这个

.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;
    }
}

但看起来隐藏的无线电仍然扰乱垂直对齐。

Answer 1

您需要使用

align-items: center;

来实现此目的。您将它放在

.console-container

类中，但它应该位于

.console-row

类中，如下所示：

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

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

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1