Javascript 如何在Bootstrap 4旋转木马中居中显示标题？

我基本上是从Bootstrap 4文档中复制了标题为carousel的示例：

然而，我似乎无法实现一个只有文本的旋转木马，其中文本居中

这是我的密码：

我的旋转木马
…没有居中！

它看起来像是位置的组合：相对您在

.carousel标题中添加了内容，并且
.carousel项目缺少“高度”值

这是一把小提琴：

更新：
Bootstrap的默认旋转木马自动获取图像的高度，然后使用

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

在图像的下中心设置标题样式。如果没有图像的自然高度，旋转木马中的其他所有东西都是绝对定位的，因为旋转木马本身的高度为0，所以它显示在底部上方20px，或者旋转木马上方和外部20px

您的
位置：相对样式使其再次显示，因为将其放回文档流使幻灯片元素再次具有自然高度，但在定位方面与其他样式相冲突。
看起来它是位置：相对
您在
.carousel标题中添加了内容，并且
.carousel项目缺少“高度”值

这是一把小提琴：

更新：
Bootstrap的默认旋转木马自动获取图像的高度，然后使用

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

在图像的下中心设置标题样式。如果没有图像的自然高度，旋转木马中的其他所有东西都是绝对定位的，因为旋转木马本身的高度为0，所以它显示在底部上方20px，或者旋转木马上方和外部20px

您的
位置：相对样式使其再次显示，因为将其放回文档流使幻灯片元素再次具有自然高度，但在定位方面与其他样式相冲突。
从BS alpha 6开始，
.carousel项
为
显示：flex
这限制了您可以对
转盘项目的内容进行的一些定位。这是一个已知的问题：

因此，一个选项是更改活动的
。旋转木马项目
是
显示：块。然后，您只需使用
文本中心
将内容居中即可

.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>


在这两种情况下，我都删除了
旋转木马标题
。仅当您希望文本覆盖幻灯片图像时，才应使用
旋转木马标题。如果没有图像，没有理由使用“旋转木马标题”，只需将内容放入
旋转木马项目


另请参见：
自BS alpha 6起，
.carousel项
为
显示：flex
这限制了您可以对
转盘项目的内容进行的一些定位。这是一个已知的问题：

因此，一个选项是更改活动的
。旋转木马项目
是
显示：块。然后，您只需使用
文本中心
将内容居中即可

.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>


在这两种情况下，我都删除了
旋转木马标题
。仅当您希望文本覆盖幻灯片图像时，才应使用
旋转木马标题。如果没有图像，没有理由使用“旋转木马标题”，只需将内容放入
旋转木马项目


另请参见：
我更新了您的小提琴。
左右15%加上文本居中，让标题混淆


增加

到你的css代码
我更新了你的小提琴。
左右15%加上文本居中，让标题混淆


增加

到您的css代码
简短回答：

向旋转木马项目添加一些高度，使其不会消失（因为您没有使用图像）：

删除：

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

更详细的回答：

我相信你的答案是可以找到的。通常，您的标题应该居中，但如果不居中，请尝试将“文本中心”添加到“旋转木马标题”中。这应该可以解决问题

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


使用d-*在不同的设备屏幕上隐藏和显示文本，并调整显示类型，即
d-md-block
意味着在中等设备上将显示设置为block
文本对齐


.bg chrome{
背景：蓝色；
}
.传送带项目{
高度：200px；
}





旋转木马标题，所有设备屏幕上都有文本，并与中心对齐
文本向左对齐的旋转木马标题
文本向右对齐的旋转木马标题
小型设备上带有隐藏文本的旋转木马标题
简短回答：

向旋转木马项目添加一些高度，使其不会消失（因为您没有使用图像）：

删除：

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

更详细的回答：

我相信你的答案是可以找到的。通常，您的标题应该居中，但如果不居中，请尝试将“文本中心”添加到“旋转木马标题”中。这应该可以解决问题

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


使用d-*在不同的设备屏幕上隐藏和显示文本，并调整显示类型，即
d-md-block
意味着将显示设置为媒体设备上的block
.carousel-caption {
    position: relative;
    left: 0;
    padding-top: 150px; // Set relative to your carousel height
}

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