Vertically Center Text In Bootstrap Carousel
I have trouble creating a carousel in Bootstrap 4 with text centered both horizontally and vertically. I have created the bootply with a carousel, but the text is just in the upper
Solution 1:
You can use the Bootstrap 4 utility classes (no additional CSS is needed)...
https://www.codeply.com/go/ORkdymGWzM
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner text-center">
<div class="carousel-item active">
<div class="d-flex h-100 align-items-center justify-content-center">
<h1>Text 1</h1>
</div>
</div>
<div class="carousel-item">
<div class="d-flex h-100 align-items-center justify-content-center">
<h1>Text 2</h1>
</div>
</div>
<div class="carousel-item">
<div class="d-flex h-100 align-items-center justify-content-center">
<h1>Text 3</h1>
</div>
</div>
</div>
</div>
Solution 2:
Change your CSS for h1
into the following:
.carousel-item h1 {
position: absolute;
margin: 0;
color: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Solution 3:
Simply you are missing this:
<div class="carousel-caption">
Before the <h1>Text 1</h1>
So it's like this:
<div class="carousel-item active">
<div class="carousel-caption">
<h1>Text 1</h1>
</div>
</div>
Solution 4:
You can use display: table;
and display: table-cell;
display along with vertical-align: middle;
.carousel-item {
display: table;
text-align: center;
}
.carousel-item h1 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
The key here is vertical-align: middle;
which works only if a div is a table.
Regarding the horizontal alignment, the text-align: center;
goes to .carousel-item
. I updated my code.
Solution 5:
use the container. this worked for me.
<div id="carouselContent" class="carousel slide" data-ride="carousel">
<div class="container">
<div class="carousel-inner text-center text-white m-auto" role="listbox">
<div class="carousel-item active text-center p-4">
<div class="user_text mb-3">
<p class="mbr-fonts-style display-7">
<strong>
Blah
</strong><br>
</p>
</div>
</div>
<div class="carousel-item text-center p-4">
<div class="user_text mb-3">
<p class="mbr-fonts-style display-7">
<strong>
Blah Blah
</strong><br>
</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselContent" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselContent" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Post a Comment for "Vertically Center Text In Bootstrap Carousel"