javascript - 如何在 Bootstrap 4 轮播中将标题居中？

Question

我基本上从 Bootstrap 4 文档中复制了带标题的轮播示例:https://v4-alpha.getbootstrap.com/components/carousel/

但是，我似乎无法实现只有文本的轮播，文本居中...

这是我的代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel" class="carousel slide bg-chrome" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div data-slide-no="0" class="carousel-item item active">
      <div class="carousel-caption d-none d-md-block">
        <h1>My Carousel</h1>
        ...is not centered!
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous slide</span>
  </a>
  <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next slide</span>
  </a>
</div>

除了一些小的样式之外，这是上面代码呈现的内容:

如您所见，文本没有居中!根据我在 StackOverflow 上发现的其他一些问题，我尝试了:

1. 将 .carousel-caption 设置为 margin: 0 auto
2. 将 .carousel-caption 设置为 position: relative
3. 将 .carousel-caption 设置为 text-align: center
4. 将每个 .carousel-item 包装在 .container 中并设置样式以实现居中文本

所有的解决方案都没有奏效，所以我问大家； 如何实现只有字幕的水平居中轮播？

编辑:JSFiddle

Answer 1

从 BS alpha 6 开始，.carousel-item 是 display:flex;，它限制了您可以对 carousel 的内容进行的一些定位-元素。这是一个已知问题:https://github.com/twbs/bootstrap/issues/21611

因此，一种选择是将事件的 .carousel-item 更改为 display:block;。然后您可以简单地使用 text-center 将内容居中。

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev{
    display:block;
}

<div class="carousel-inner" role="listbox">
    <div class="carousel-item active text-center p-4">
        <h1>My Carousel</h1> ...is centered!
    </div>
    <div class="carousel-item text-center p-4">
        <h1>2 Carousel</h1> ...is centered!
    </div>
    <div class="carousel-item text-center p-4">
        <h1>3 Carousel</h1> ...is centered!
    </div>
</div>

http://www.codeply.com/go/ja3h44A7bQ

---

另一种选择是简单地使用 flexbox utils，并将方向更改为 flex-column。然后可以使用align-items-center...

      <div class="carousel-inner text-white" role="listbox">
            <div class="carousel-item active align-items-center flex-column p-4">
                <h1>My Carousel</h1> ...is centered!
            </div>
            <div class="carousel-item align-items-center flex-column p-4">
                <h1>2 Carousel</h1> ...is centered!
            </div>
            <div class="carousel-item align-items-center flex-column p-4">
                <h1>3 Carousel</h1> ...is centered!
            </div>
       </div>

http://www.codeply.com/go/9I7voUaDUi

在这两种情况下，我都删除了 carousel-caption。 carousel-caption 只应在您希望文本覆盖 幻灯片图像时使用。如果没有图像，则没有理由使用“carousel-caption”，只需将内容放在 carousel-item 中即可。

---

另见:Vertically center text in Bootstrap carousel