Flexbox align-center makes parent container misaligned

Question

I'm trying to vertically align the images in image containers that are laid out side by side.

However, when I applied the align-self: center to the children, the second-to-last parent becomes a little misaligned.

I've been trying different ways to correct this, but unless I stop using display: flex on the child image the issue will reappear.

The issue seems to be the car images are originally 37.5px height and 50px width, but the view more has 50px height and width. However, I think that difference should be taken care of in the parent's code where height and width are both set to 50px. But in the page inspect element tells me the car image parent height is 3px less than the following container.

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

This is what it looks like in the page:

Please put up a simplified working example to demonstrate the issue — Huangism, Apr 30 '18 at 14:56
Also you should remove `display: flex;` from the image tag, it cannot contain other tags — Huangism, Apr 30 '18 at 15:07
Problem is solved with Niche's answer. I did not give the button's parent a flex display, after adding `display: flex; flex-wrap: wrap;` to button's parent the buttons are now aligned correctly. — mxdi9i7, Apr 30 '18 at 15:37

score 1 · Accepted Answer · answered Apr 30 '18 at 15:17

You're applying the flex property too far nested into the html. If you're wrapping your buttons in a container (which I guess has buttons set as display: inline-block), you should remove the display property from your buttons and set display: inline-flex and flex-wrap: wrap on the button container.

Check out this quick snippet I made to solve your problem.

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

Flexbox align-center makes parent container misaligned

1 Answers1