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>
3
Answers
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/Try it with this code, here:
Basically just added
style="margin-top: auto;margin-bottom: auto;"
to the div with mx-auto class.Just use
my-auto
for vertical center…http://codeply.com/go/ZQM4ANFcXC
align-middle
will work ondisplay: table
ordisplay: inline
elements.Also see this similar question