Flexbox Vertical Text Alignment

Using Flexbox, I'm trying to achieve this: But I'm instead reaching this point: Here is what I've got so far (vendor prefixes omitted). If someone could help get this working wel

Solution 1:

The align-items property applies only to flex containers.

You have it applied to img-wrapper:

.item,
.img-wrapper {
  align-items: center;
}

...but this element is not a flex container.

Since img-wrapper does not have display: flex or display: inline-flex applied, align-items is being ignored.

Try this:

.item,
.img-wrapper {
  align-items: center;
  display: flex;
}

.container {
  display: flex;
  justify-content: center;
}
.item {
  display: flex;
  flex-direction: column;
  width: 300px;
}
.item,
.img-wrapper {
  align-items: center;
  display: flex;
}
img {
  max-width: 100%;
}
.img-wrapper {
  flex-grow: 1;
  flex-shrink: 0;
}
.excerpt-wrapper > p {
  margin: 0;
}

<divclass="container"><divclass="item"><divclass="img-wrapper"><imgsrc="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919"alt=""></div><divclass="excerpt-wrapper"><p>ghostbusting since 1938</p><p>ghostbusting since 1938</p><p>ghostbusting since 1938</p><p>ghostbusting since 1938</p><p>ghostbusting since 1938</p></div></div><divclass="item"><divclass="img-wrapper"><imgsrc="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241"alt=""></div><divclass="excerpt-wrapper"><p>ghostbusting since 1938</p><p>ghostbusting since 1938</p></div></div>

jsFiddle

And the only reason the text in the left column is vertically aligned in that location is because that happens to be where it meets the bottom margin of the photo.

If you want the text in the right column to be aligned in the same spot, make the top element an image or box equal in height to its cousin in the adjacent column.

.container {
  display: flex;
  justify-content: center;
}
.item {
  display: flex;
  flex-direction: column;
  width: 300px;
}
.item,
.img-wrapper {
  align-items: center;
  display: flex;
}
img {
  max-width: 100%;
}
.img-wrapper {
  /* flex-grow: 1; */flex-shrink: 0;
  height: 269px;
  width: 291px;
  justify-content: center;
}
.excerpt-wrapper > p {
  margin: 0;
}

<divclass="container"><divclass="item"><divclass="img-wrapper"><imgsrc="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919"alt=""></div><divclass="excerpt-wrapper"><p>ghostbusting since 1938</p><p>ghostbusting since 1938</p><p>ghostbusting since 1938</p><p>ghostbusting since 1938</p><p>ghostbusting since 1938</p></div></div><divclass="item"><divclass="img-wrapper"><imgsrc="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241"alt=""></div><divclass="excerpt-wrapper"><p>ghostbusting since 1938</p><p>ghostbusting since 1938</p></div></div>

jsFiddle

Solution 2:

If you need the display to adapt to a variable images size, and don't have problems with the width of the container (that is, you can set a size for it beforehand , or at least a maximum widtyh that will be wide enough for the content)

The you can change the flex direction to row, reorder the items so that the images go first, and force a wrap at the end of the images:

.container {
  display: flex; 
 flex-wrap: wrap;
}

.container:after {
  content: "";
  order: 15;
  width: 9999px;
}

.containerdiv {
  width: 200px;
}

.img-wrapper {
  order: 10;
  text-align: center;
}

.excerpt-wrapper {
  order: 20; 
  border-top: solid 1px red;
}

img {
  max-width: 100%;  
  
}

<divclass="container"><divclass="img-wrapper"><imgsrc="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919"alt=""></div><divclass="excerpt-wrapper"><p>ghostbusting since 1938&nbsp;ghostbusting since 1938&nbsp;ghostbusting since 1938&nbsp;ghostbusting since 1938&nbsp;ghostbusting since 1938&nbsp;</p></div><divclass="img-wrapper"><imgsrc="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241"alt=""></div><divclass="excerpt-wrapper"><p>Text goes here</p></div></div>