Flexbox对齐中心使父容器未对齐

Question

我正在尝试将图像垂直对齐并排放置的图像容器中。

然而，当我将align-self: center应用于孩子时，倒数第二个父母变得有点错位。

我一直在尝试不同的方法来纠正这个问题，但除非我停止在子图片上使用display: flex，否则问题会重新出现。

问题似乎是汽车图像原本是37.5px高度和50px宽度，但视图更多有50px高度和宽度。但是，我认为在父代码中应该注意差异，其中高度和宽度都设置为50px。但是在页面中，检查元素告诉我汽车图像父高度比下一个容器小3px。

.imageContainer {
  height: $thumbnail_image_side_length;
  width: $thumbnail_image_side_length;
  margin-left: auto;
  margin-right: auto;
  display: inline-flex;
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-self: center;
}

<button onClick={method here}>
    <div className="imageContainer">
        <img src={} alt='thumbnail' />
    </div>
    <p>{text here}</p>
</button>

这就是页面中的样子：

Answer 1

您将flex属性应用于嵌套到html中。如果您将按钮包装在容器中（我猜按钮设置为display: inline-block），您应该从按钮中删除显示属性并在按钮上设置display: inline-flex和flex-wrap: wrap容器

查看我为解决您的问题而制作的快速摘录。

.container {
  width: 100%;
  display: inline-flex;
  flex-wrap: wrap;
}

.container button {
  width: 50%;
}

.imageContainer {
  height: 30px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-self: center;
}

<div class="container">
  <button onClick={method here}>
      <div className="imageContainer">
          <img src="" alt='thumbnail' />
      </div>
      <p>{text here}</p>
  </button>
  <button onClick={method here}>
      <div className="imageContainer">
          <img src="" alt='thumbnail' />
      </div>
      <p>{text here}</p>
  </button>
  <button onClick={method here}>
      <div className="imageContainer">
          <img src="" alt='thumbnail' />
      </div>
      <p>{text here}</p>
  </button>
  <button onClick={method here}>
      <div className="imageContainer">
          <img src="" alt='thumbnail' />
      </div>
      <p>{text here}</p>
  </button>
</div>