Question

我想知道如何使用新的BootStrap Carousel，但只有文字＆amp;标题文字垂直对齐中间？

知道怎么做吗？每次我删除＆＃39; img＆＃39;来自旋转木马 - 幻灯片消失。

我喜欢新的Bootstrap，但很难搞清楚。

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-50" src="" alt="First slide">
      <div class="carousel-caption">
        <h3>Boyd W.</h3>
        <p>TEXT</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-50" src="" alt="First slide">
      <div class="carousel-caption">
        <h3>Diane L</h3>
        <p>TEXT</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-50" src="" alt="First slide">
      <div class="carousel-caption">
        <h3>Randall L</h3>
        <p>TEXT</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-50" src="" alt="First slide">
      <div class="carousel-caption">
        <h3>John D.</h3>
        <p>TEXT</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-50" src="" alt="First slide">
      <div class="carousel-caption">
        <h3>Jody B.</h3>
        <p>TEXT</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer 1

你需要给旋转木马内部一个高度。

.carousel-inner{
  height: 100px;
}
.carousel-caption{
  top: 50%;
}

这是一个有效的代码：

https://codepen.io/Washable/pen/Oxqjbq?editors=1100

Bootstrap 4 Beta - 仅带文字和附件的旋转木马标题文本垂直对齐中间

1 个答案: