使用 CSS 在水平滚动图像下方添加一行文本

Question

我试图在水平滚动中的第一张图像下方放置一行文本。 但是，每次我尝试时，它都会在页面中间插入文本，并且不与图像对齐。

我在下面附上了我的代码。 有人可以提供帮助并让我知道实现上述目标的最佳方法吗？

编辑请找到我要实现的目标的附加图像。

先感谢您。 埃斯梅

 * { margin: 0; padding: 0; line-height: inherit; }.horizontal_slider { display: block; width: 100%; overflow-x: scroll; padding: 0px; box-sizing: border-box; background-color: #fff; line-height: 25em; }.horizontal_slider_video { display: block; width: 100%; overflow-x: hidden; padding: 0px; box-sizing: border-box; background-color: #fff; line-height: 25em; }.horizontal_slider::-webkit-scrollbar { display: none; } /* for ms*/.horizontal_slider { -ms-overflow-style: none; }.slider_container { display: block; white-space: nowrap; }.item { display: inline-block; margin-right: 10px; }.item img { width: px; height: 850px; object-fit: cover; }

 <div class="slider_container"> <div class="horizontal_slider"> <div class="slider_container"> <div style="text-align: left"> <h2>Side by side sisters</h2> </div> <div class="item"> <img src="https://freight.cargo.site/t/original/i/0b6e5d416b8d2666e95ad95076f5a051e7c744345a0c66f43667f08f1a2619d6/0007-copy.jpg"> </div> <div class="item"> <img src="https://freight.cargo.site/t/original/i/21fae0988d8a0ae94a7dabcf10286fd8fc6e0488a3801de8017c2932024f46bb/0008-copy.jpg"> </div> <div class="item"> <img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg"> </div> <div class="item"> <img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg"> </div> <div class="item"> <img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg"> </div> <img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg"> </div> </div> </div>

Answer 1

语义上正确的方法是将每个图像包装在一个图形元素中，并为文本包含一个图形说明。 所以像：

<figure>
<img src="image.jpg" alt="image descriptor">
<figcaption>The caption that goes below the image</figcaption>
</figure>

毫无疑问，您需要调整 css 以使其看起来正确。