引导程序中的垂直对齐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元素.

另见这个类似的问题