CSS Flexbox how to centre divs which are different size?

Question

So I am currently working with this:

#useCasesIndexPageWrapper
{
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
}

#useCasesIndexPageInnerWrapper
{

}

.useCaseWrapper
{
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  flex-wrap: wrap;
}

.useCasePExplain
{
  text-align: center;
  margin-left: 20%;
  margin-right: 20%;
}

.useCasePExplain:not(:last-child)
{
  margin-bottom: 80px;
}

.useCaseExmpImg
{
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
}

.useCaseExmpImg img
{
  height: 400px;
  width: auto;
  box-shadow: 8px 8px 10px #888888;
}

.useCaseSplitArrow
{
  margin-left: 80px;
  margin-right: 80px;
  height: 80px;
  width: 80px;
}

<div id="useCasesIndexPageWrapper">

    <div id="useCasesIndexPageInnerWrapper">

      <div class="useCaseWrapper">

        <div class="useCaseExmpImg">

          <img src="http://via.placeholder.com/512x400">

        </div>

        <img class="useCaseSplitArrow" src="http://www.clipartbest.com/cliparts/KTj/AXb/KTjAXb7Tq.jpeg">

        <div class="useCaseExmpImg">

          <img src="http://via.placeholder.com/602x400">

        </div>

      </div>

      <p class="useCasePExplain">TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</p>

      <div class="useCaseWrapper">

        <div class="useCaseExmpImg">

          <img src="http://via.placeholder.com/355x400">

        </div>

        <img class="useCaseSplitArrow" src="http://www.clipartbest.com/cliparts/KTj/AXb/KTjAXb7Tq.jpeg">

        <div class="useCaseExmpImg">

          <img id="useCaseSol2Img" src="http://via.placeholder.com/782x400">

        </div>

      </div>

      <p class="useCasePExplain">TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</p>

      <div class="useCaseWrapper">

        <div class="useCaseExmpImg">

          <img src="http://via.placeholder.com/304x400">

        </div>

        <img class="useCaseSplitArrow" src="http://www.clipartbest.com/cliparts/KTj/AXb/KTjAXb7Tq.jpeg">

        <div class="useCaseExmpImg">

          <img id="useCaseSol2Img" src="http://via.placeholder.com/644x400">

        </div>

      </div>

      <p class="useCasePExplain">TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</p>


    </div>

  </div>

I am trying to have everything display centre but still keep the flow of the image > arrow > image in each div that is inside #useCasesIndexPageInnerWrapper but the images which I am using are all different sizes.

As you can see from the example I included, the first one is ok but the second two are out of line... I know I could just set a width so then they would all line up and cater for the images which are shorter, but that means the longer images get pushed to far to the right and it looks off.

What can I do? Or should I just see if I can make all the images the same size? - My problem doing that is the images are supposed to focus on something specific, so having a set width and height might make it hard to focus on what needs showing.

Are you trying to get 2 per column? That snippet is hard to follow with images being that big. — justDan, Oct 09 '17 at 17:03
If you want the arrows to align in a single column, give all image items `flex: 1`. That forces the image elements on both sides to consume all free space, which squeezes the arrow into the center. https://jsfiddle.net/qvp2g1v0/ — Michael Benjamin, Oct 09 '17 at 17:04
Since the div children are flex containers, you can then use flex `auto` margins (if necessary) to position the images: https://jsfiddle.net/qvp2g1v0/1/ — Michael Benjamin, Oct 09 '17 at 17:10
@Michael_B Yeah that works for me, both the `flex: 1` and auto margins. +1 — Erdss4, Oct 09 '17 at 19:04

CSS Flexbox how to centre divs which are different size?

0 Answers0