Align pictures to the left one top of each other with text on the right at centre of image-CodePudding

I have 5 images and I would like to stack them one over the other on the left hand side. I have some text that I would like to display beside each image on the right of the respective image and I would like that text to appear beside the middle of the respective image. I have been able to get the images to appear stacked on top of each other but unfortunately, the text also appears beneath the respective image rather than beside it.

And yes, I am trying to make a meme.

My HTML is as follows.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div id="container">
            <div id="floated-imgs">
              <div ><img src="a.jpeg" /></div>
              <div >
                  <div>A</div>
              </div>
              <div ><img src="b.jpeg" /></div>
              <div >
                  <div>B</div>
              </div>
              <div ><img src="c.jpeg" /></div>
              <div >
                  <div>C</div>
              </div>
              <div ><img src="d.jpeg" /></div>
              <div >
                  <div>D</div>
              </div>
              <div ><img src="e" /></div>
              <div >
                  <div>E</div>
              </div>
            </div>
        </div>
    </body>
</html>

My CSS looks like this

#container { overflow: hidden; background-color:black; }
#floated-imgs { float: left; }
#floated-imgs img {display: block; width:300px;}
.image-div { display:inline-block; vertical-align:top; }
.text-div { display:inline-block; color:white; font-family: Impact; font-size: 50px; text-align: center; display: flex; justify-content: center; align-items: center;}

Can you see what I am doing wrong?

CodePudding user response：

The layout itself can be solved with Flexbox and CSS-Grid. I would solve it with CSS-Grid as it has some advantages in cases where more than 1 direction needs to be controlled.

The vertical alignment of the text at the vertical center can be solved with Flexbox. I advise using flex-direction: column over the default flex-direction: row to not lose the normal block element behavior.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.container img {
  width: 100%;
}

.container > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div >
  <img src="https://via.placeholder.com/1920x1080.jpg">
  <div>A</div>
  <img src="https://via.placeholder.com/1920x1080.jpg">
  <div>B</div>
  <img src="https://via.placeholder.com/1920x1080.jpg">
  <div>C</div>
  <img src="https://via.placeholder.com/1920x1080.jpg">
  <div>D</div>
  <img src="https://via.placeholder.com/1920x1080.jpg">
  <div>E</div>
</div>

CodePudding user response：

I think you can use display: flex; and use align-item: center;