引導程序中的垂直對齊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

只需使用my-auto爲垂直中心 ...

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

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

align-middle將在display: table或display: inline元素工作。

另請參閱此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> 

基本上只是增加style="margin-top: auto;margin-bottom: auto;"與MX-汽車類股利。