Help align text within a flexbox item

Help align text within a flexbox item
0

#1

I am trying to align text in the bottom left corner of an img element that sits in a flexbox container.
I want the text to be responsive with the image.
I’ve tried using absolute positioning but for some reason it will only align to the centre of the img.
Making the img-div a flex container hasn’t worked either.
Any help would be massively appreciated.

The elements I am talking about are within the div with the id=“img-div”

This is what I am trying to achieve while keeping it responsive when the browser resizes (Sorry for the cheesy stock image):

imagehttps://s-media-cache-ak0.pinimg.com/originals/0a/e4/ec/0ae4ec3c5b1f27449ce373b83fb60d19.jpg


#2

Maybe something like:

#img-div {
  flex: 1;
  align-self: flex-start;
  position: relative;
  width:100%;
}

#image{
  max-width: 100%;
  display: block;
  height: auto;
}

#img-caption{
  position: absolute;
  bottom: 10px;
  left: 8px;
}

#3

Thank you. That does the trick :slight_smile: