Menu
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>
551
One way to vertically center is to use my-auto . This will center the element within it's flexbox container (The Bootstrap 4 . row is display:flex ). For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.
Answer: Use the align-items-center Class In Bootstrap 4, if you want to vertically align a <div> element in the center or middle, you can simply apply the class align-items-center on the containing element.
In Bootstrap 5, if we want to vertically align an <div> element in the middle of a containing element, we can do this by applying the class align-items-center and d-flex on the containing element of that div. Here, the d-flex class has the same effect as that of the display: flex; property in CSS. Example: HTML.
Aligning content to the center of the DIV is very simple in Bootstrap 5, You just have to convert the div into a flex box using d-flex class property and then use the property align-items-center to vertically align the content in the middle of the div.
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
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
