Bootstrap轮播中的文本垂直居中答案

【问题标题】：Vertically center text in Bootstrap carouselBootstrap轮播中的文本垂直居中
【发布时间】：2018-02-05 11:30:55
【问题描述】：

我无法在 Bootstrap 4 中创建一个带有水平和垂直居中文本的轮播。

我创建了带有轮播的bootply，但文本只是在左上角而不是在屏幕中间。

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

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您可以使用 Bootstrap 4 实用程序类（不需要额外的 CSS）...

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>

【讨论】：

【解决方案2】：

将 h1 的 CSS 更改为以下内容：

.carousel-item h1 {
  position: absolute;
  margin: 0;
  color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

【讨论】：

【解决方案3】：

只是你错过了这个：

<div class="carousel-caption">

<h1>Text 1</h1> 之前所以是这样的：

<div class="carousel-item active">
  <div class="carousel-caption">
    <h1>Text 1</h1>
  </div>
</div>

【讨论】：

那么文本将位于屏幕底部而不是垂直居中
看stackoverflow.com/questions/27279865/…

【解决方案4】：

您可以将display: table; 和display: table-cell; 与vertical-align: middle; 一起使用

.carousel-item {
    display: table;
    text-align: center;
}

.carousel-item h1 {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

这里的关键是vertical-align: middle;，它只在 div 是表格时才有效。

关于水平对齐，text-align: center; 转到.carousel-item。我更新了我的代码。

【讨论】：

【解决方案5】：

使用容器。这对我有用。

    <div id="carouselContent" class="carousel slide" data-ride="carousel">

        <div class="container">
            <div class="carousel-inner text-center text-white m-auto" role="listbox">
                <div class="carousel-item active text-center p-4">
                    <div class="user_text mb-3">
                        <p class="mbr-fonts-style display-7">
                            <strong>
                                Blah
                            </strong><br>
                        </p>
                    </div>

                </div>
                <div class="carousel-item text-center p-4">

                    <div class="user_text mb-3">
                        <p class="mbr-fonts-style display-7">
                            <strong>
                                Blah Blah

                            </strong><br>
                        </p>
                    </div>

                </div>
            </div>
        </div>
            <a class="carousel-control-prev" href="#carouselContent" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselContent" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
    </div>

【讨论】：