ブートストラップカルーセルのテキストを中央に配置

Question

ブートストラップ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

ますブートストラップ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

あなたは鍵がここにdiv要素がテーブルである場合にのみ動作しvertical-align: middle;あるvertical-align: middle;

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

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

に沿っdisplay: table;とdisplay: table-cell;ディスプレイを使用することができます。

水平配置に関しては、text-align: center;は.carousel-itemになります。コードを更新しました。

Answer 3

の変更は、次へh1のためのあなたのCSS：単に

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

Answer 4

あなたはこの不足している：<h1>Text 1</h1> 前

<div class="carousel-caption"> 

は、だから、このようなものだ：

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