I have 5 images that I want to stack on the left side, with text displayed beside each image to the right and centered vertically. I've managed to stack the images, but the text is appearing below them instead of beside.
Yes, I'm trying to create a meme.
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<div id="floated-imgs">
<div class="image-div"><img src="a.jpeg" /></div>
<div class="text-div">
<div>A</div>
</div>
<div class="image-div"><img src="b.jpeg" /></div>
<div class="text-div">
<div>B</div>
</div>
<div class="image-div"><img src="c.jpeg" /></div>
<div class="text-div">
<div>C</div>
</div>
<div class="image-div"><img src="d.jpeg" /></div>
<div class="text-div">
<div>D</div>
</div>
<div class="image-div"><img src="e" /></div>
<div class="text-div">
<div>E</div>
</div>
</div>
</div>
</body>
</html>
Here is my CSS:
#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;}
Do you see what I'm doing wrong?