如何在多项目轮播中的图片正下方添加标题（居中并带有电子邮件链接）？

Question

我要在多项目轮播中设置员工的照片（一次3张，一次前进1张）。我可以使用它，但是无法将标题移动到图像下方。它显示在轮播中下一个项目上方的图像旁边。

<div id="recipeCarousel" class=carousel slide w-100 data-ride="carousel">
  <div class="carousel-inner w-100 role="listbox">
  <div class="carousel-item active">
  <img class="d-block col-4 img-fluid" src="images/perry.png" alt="perry">
  <div class-"carousel-caption d-block">
  <h5>Perry Doe</h5>
  <p>Executive Director</p> 
  <p><a href="mailto:pdoe@company.com">pdoe@company.com</a></p>
</div>
</div>
</div>

尝试过这个...

#recipeCarousel .carousel-caption {
position: relative;
left: auto;
right: auto;
}