Align pictures to the left one top of each other with text on the right at centre of image
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
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 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>
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?
أضف إجابة