5

I'm trying to have a center text over image. I've used mx-auto to Horizontal centering my overlay text and use align-middle for a Vertical alignment. But the vertical alignment didn't work. Does somebody know why ?

  

  <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>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
michel lompret
  • 317
  • 4
  • 17

3 Answers3

10

Just use my-auto for vertical center...

  <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://codeply.com/go/ZQM4ANFcXC

align-middle will work on display: table or display: inline elements.

Also see this similar question

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Is there any reason why it wouldn't be better to use `m-auto` instead of `my-auto mx-auto` ? – Lee Apr 30 '19 at 14:05
  • if you wanted both horizontal and vertical center use `m-auto`. I used both because the question was only about vertical center and I wanted to distinguish the use of `my-auto`. – Carol Skelly Apr 30 '19 at 14:14
0

You don't need .mx-auto. You can just use .justify-content-center, .align-items-center and .flex-column on the parent. 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>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
0

Try it with this code, here:

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

Basically just added style="margin-top: auto;margin-bottom: auto;" to the div with mx-auto class.