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上找到的其他一些问题，我试过了：

将.carousel-caption设为margin: 0 auto
将.carousel-caption设为position: relative
将.carousel-caption设为text-align: center
将.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 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。没有理由使用＆＃39; carousel-caption＆＃39;如果没有图像，只需将内容放在carousel-item内。

另见：Vertically center text in Bootstrap carousel

Answer 2

看起来它是您在position:relative;上添加的.carousel-caption和.carousel-item

缺少'height'值的组合

这是一个工作小提琴：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。通常情况下，您的字幕应该居中，但如果没有，请尝试在“carousel-caption”中添加“text-center”。那应该解决它。

使用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;
}

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

6 个答案: