如何在 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-item 的内容进行的一些定位。这是一个已知问题：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 工具，并将方向更改为 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

Answer 2

看起来它是您在.carousel-caption 上添加的position:relative; 和.carousel-item 缺少“高度”值的组合

这是一个有效的小提琴：https://jsfiddle.net/z0cxhgc1/1/

更新： Bootstrap 的默认轮播会自动取图片的高度，然后使用

position: absolute;
right: 15%;
bottom: 20px;
left: 15%;

在图像的下中心设置标题样式。如果没有图像的自然高度，则轮播中的其他所有内容都是绝对定位的，并且由于轮播本身的高度为 0，因此它显示在底部上方 20px 或轮播上方和外部 20px 处。

您的position: relative; 样式再次显示它，因为将其放回文档流中使幻灯片元素再次具有自然高度，但在定位方面与其他样式发生冲突。

Answer 3

简答：

为轮播项目添加一些高度，使其不会消失（因为您没有使用图像）：

.carousel-item{
    height:200px;
}

删除：

.carousel-caption {
    position: relative;
    text-align: center;
}

更详细的答案：

相信你的答案可以在here找到。通常，您的字幕应该居中，但如果不是，请尝试将“text-center”添加到您的“carousel-caption”。那应该可以解决它。

使用 Bootstrap 4 Alpha 6 的示例解决方案显示：

• 使用 d-* 在不同设备屏幕上隐藏和显示文本以及调整显示类型，即 d-md-block 表示将显示设置为在中型设备上阻止
• 文本的对齐方式

.bg-chrome {
   background: blue;
 }
 
 .carousel-item{
   height:200px;
 }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div id="carouselIndicators" class="carousel slide bg-chrome" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselIndicators" data-slide-to="1"></li>
    <li data-target="#carouselIndicators" data-slide-to="2"></li>
    <li data-target="#carouselIndicators" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <div class="carousel-caption d-block">
        <h3>A carousel caption with text on all device screens and aligned to the center</h3>
      </div>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption d-block text-left">
        <h3>A carousel caption with text aligned to the left</h3>
      </div>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption d-block text-right">
        <h3>A carousel caption with text aligned to the right</h3>
      </div>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption d-none d-md-block">
        <h3>A carousel caption with hidden text on small devices</h3>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselIndicators" 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="#carouselIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next slide</span>
  </a>
</div>

Answer 4

我更新了你的小提琴。 左右 15% PLUS 文字居中让标题混淆

https://jsfiddle.net/jchp6bg9/10/ 添加了

left:0%; 
right: 0%; 

到你的css代码

Answer 5

对于固定高度（例如：400px）的轮播，这对我有用：

.carousel-caption {
    position: relative;
    left: 0;
    padding-top: 150px; // Set relative to your carousel height
}

Answer 6

.carousel-caption{
    background-color: rgb(209, 209, 154);
    top: 30%;
    height: auto;
    max-height: 120px;
}