Bootstrap旋转木马中的垂直居中文本

Question

我在创建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> 

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

Answer 2

您可以使用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。我更新了我的代码。

Answer 3

改变你的CSS为h1为以下：

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

Answer 4

只要你缺少这样的：

<div class="carousel-caption"> 

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

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