我有5张图片，我想把它们一个叠在另一个的左边。我有一些文本，我想在各自的图像右侧的每个图像旁边显示，我希望该文本出现在各自图像的中间。我已经能够让图像出现堆叠在彼此的顶部，但不幸的是，文本也出现在各自的图像下方，而不是旁边。
是的，我想做一个表情包。
我的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>
我的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;}
你能看出我做错了什么吗?
布局本身可以通过Flexbox和CSS-Grid来解决。我会用CSS-Grid来解决这个问题，因为它在需要控制多个方向的情况下有一些优势。
文本在垂直中心的垂直对齐可以用Flexbox解决。我建议使用flex-direction: column而不是默认的flex-direction: row，以免失去正常的块元素行为。
.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 class="container">
<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>我认为你可以使用显示:flex;使用align-item: center;