在Bootstrap轮播中垂直居中放置文本 [英] Vertically center text in Bootstrap carousel

问题描述

我在Bootstrap 4中创建旋转木马时遇到麻烦，该文本的水平和垂直居中对齐.

I have trouble creating a carousel in Bootstrap 4 with text centered both horizontally and vertically.

我已经使用轮播创建了 bootply ，但文本仅在上方而不是在屏幕中间.

I have created the bootply with a carousel, but the text is just in the upper left corner instead of in the middle of the screen.

<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <h1>Text 1</h1>
    </div>
    <div class="carousel-item">
      <h1>Text 2</h1>
    </div>
    <div class="carousel-item">
      <h1>Text 3</h1>
    </div>´
  </div>
</div>

推荐答案

您可以使用Bootstrap 4实用程序类(不需要其他CSS )...

You can use the Bootstrap 4 utility classes (no additional CSS is needed)...

https://www.codeply.com/go/ORkdymGWzM

<div class="carousel slide" data-ride="carousel">
    <div class="carousel-inner text-center">
        <div class="carousel-item active">
            <div class="d-flex h-100 align-items-center justify-content-center">
                <h1>Text 1</h1>
            </div>
        </div>
        <div class="carousel-item">
            <div class="d-flex h-100 align-items-center justify-content-center">
                <h1>Text 2</h1>
            </div>
        </div>
        <div class="carousel-item">
            <div class="d-flex h-100 align-items-center justify-content-center">
                <h1>Text 3</h1>
            </div>
        </div>
    </div>
</div>

这篇关于在Bootstrap轮播中垂直居中放置文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！