ブートストラップでの垂直方向の整列4

Question

イメージの中央にテキストを表示しようとしています。私はmx-autoを使用してオーバーレイのテキストを水平にセンタリングし、垂直方向のアラインメントにはalign-middleを使用しました。しかし、垂直方向の位置合わせは機能しませんでした。なぜ誰かが知っていますか？

 

 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
     <div class="card "> 
 
<img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature"> 
 
<div class="card-img-overlay d-flex"> 
 
    <div class="mx-auto"> 
 
<h4 class="card-title align-middle">Animal Farm</h4> 
 
<h6 class="text align-middle">George Orwell</h6> 
 
<p class="card-text align-middle">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p> 
 
</div> 
 
</div> 
 
</div>

Answer 1

だけ

http://www.codeply.com/go/ZQM4ANFcXC

align-middle

<div class="card"> 
     <img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature"> 
     <div class="card-img-overlay d-flex"> 
      <div class="my-auto mx-auto text-center"> 
       <h4 class="card-title">Animal Farm</h4> 
       <h6 class="text">George Orwell</h6> 
       <p class="card-text">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p> 
      </div> 
     </div> 
    </div> 

が display: tableまたは display: inline要素で動作します... 垂直中心ため my-autoを使用しています。

この他を見るsimilar question

Answer 2

あなたは.mx-autoは必要ありません。親には.justify-content-center,.align-items-centerおよび.flex-columnを使用できます。 https://v4-alpha.getbootstrap.com/utilities/flexbox/

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="card "> 
 
    <img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature"> 
 
    <div class="card-img-overlay d-flex justify-content-center align-items-center flex-column"> 
 
     <h4 class="card-title align-middle">Animal Farm</h4> 
 
     <h6 class="text align-middle">George Orwell</h6> 
 
     <p class="card-text align-middle">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p> 
 
    </div> 
 
</div>

Answer 3

ここでは、このコードでそれを試してみてください。

<div class="card "> 
<img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature"> 
<div class="card-img-overlay d-flex"> 

<div class="mx-auto" style="margin-top: auto;margin-bottom: auto;"> 
<h4 class="card-title">Animal Farm</h4> 
<h6 class="text">George Orwell</h6> 
<p class="card-text">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p> 
</div> 

</div> 
</div> 

は、基本的にはMX-自動クラスでdiv要素にstyle="margin-top: auto;margin-bottom: auto;"を追加しました。