在Bootstrap 3中的多项目转盘中将文本放在图像上

<div class="item">
  <img src="image.jpg" alt="Image">
  <div class="caption">
    <h3>标题</h3>
    <p>描述文本</p>
  </div>
</div>

.item {
  position: relative;
}

.caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

<div id="carousel-example" class="carousel slide" data-ride="carousel">
  <!-- 轮播项目 -->
  <div class="carousel-inner">
    <div class="item active">
      <!-- 第一个项目 -->
      <img src="image1.jpg" alt="Image 1">
      <div class="caption">
        <h3>标题 1</h3>
        <p>描述文本 1</p>
      </div>
    </div>
    <div class="item">
      <!-- 第二个项目 -->
      <img src="image2.jpg" alt="Image 2">
      <div class="caption">
        <h3>标题 2</h3>
        <p>描述文本 2</p>
      </div>
    </div>
    <!-- 其他项目 -->
  </div>
</div>

$(document).ready(function() {
  $('#carousel-example').carousel();
});