How to vertically center a Bootstrap carousel-caption?
You can use the translateY function of the CSS property transform to vertically align elements. Browser support is quite decent, including IE9.
Therefore just add the following to your .carousel-caption CSS.
top: 50%;
transform: translateY(-50%);
Now you need to get rid of the extra bottom space, added by the default bootstrap CSS. Add the following as well to your .carousel-caption CSS.
bottom: initial;
And last but not least give the parent element, in this case .item, the following CSS to prevent blurry elements when it's placed on half a pixel.
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
Working Example
Vertically center text in Bootstrap carousel
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>
Bootstrap 4 carousel caption vertical align
TranslateY, and overriding the Bootstrap bottom position should work. You also want to remove the containers.
.carousel-caption {
transform: translateY(-50%);
bottom: 0;
top: 50%;
}
https://www.codeply.com/go/ziV9Qvxms8
Add static vertically and horizontally centred caption (or other content) to Bootstrap 4's Carousel
Can you try the following code where your caption's class is carousel-caption
.carousel-caption {
width: 50%; height: 50%; left:25%; top:25%
}
**issue is resolved by the code snippet above.
How to center caption in Bootstrap 4 carousel?
As of BS alpha 6, the .carousel-item is display:flex; which limits some of the positioning you can do with the contents of carousel-item. This is a known issue: https://github.com/twbs/bootstrap/issues/21611
So, one option is to change the active .carousel-item is display:block;. Then you can simply use text-center to center the contents.
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev{
display:block;
}
<div class="carousel-inner" role="listbox">
<div class="carousel-item active text-center p-4">
<h1>My Carousel</h1> ...is centered!
</div>
<div class="carousel-item text-center p-4">
<h1>2 Carousel</h1> ...is centered!
</div>
<div class="carousel-item text-center p-4">
<h1>3 Carousel</h1> ...is centered!
</div>
</div>
http://www.codeply.com/go/ja3h44A7bQ
Another option is to simply use the flexbox utils, and change the direction to flex-column. Then align-items-center can be used...
<div class="carousel-inner text-white" role="listbox">
<div class="carousel-item active align-items-center flex-column p-4">
<h1>My Carousel</h1> ...is centered!
</div>
<div class="carousel-item align-items-center flex-column p-4">
<h1>2 Carousel</h1> ...is centered!
</div>
<div class="carousel-item align-items-center flex-column p-4">
<h1>3 Carousel</h1> ...is centered!
</div>
</div>
http://www.codeply.com/go/9I7voUaDUi
In both cases I've removed the carousel-caption. The carousel-caption should only be used if you want the text to overlay a slide image. There's no reason to use the 'carousel-caption' if there is no image, just put the content inside carousel-item.
Also see: Vertically center text in Bootstrap carousel
How to make contents inside carousel vertically center?
.full-width { width: 100%;}
.carousel-caption { position: absolute; top: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 100%;}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><div id="carousel-example" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example" data-slide-to="0" class="active"></li> <li data-target="#carousel-example" data-slide-to="1"></li> </ol>
<!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://placehold.it/300x200" class="full-width" /> <div class="carousel-caption"> <div class="full-width text-center"> <p> Some text which is vertically, horizontally centered in image </p> </div> </div> </div> <div class="item"> <img src="http://placehold.it/300x200" class="full-width" /> <div class="carousel-caption"> <div class="full-width text-center"> Some text which is vertically, horizontally centered in image </div> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>Bootstrap Carousel Caption Center Align
Without the code, I can only guess - right now you have:
<div class="carousel-item">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
source: w3schools
simple reordering may work, if not show us the code
<div class="carousel-item">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
<img src="la.jpg" alt="Los Angeles">
</div>
Vertically center the showing images on a fixed height Bootstrap carousel
Add this to your css:
.carousel-inner .item img {
position:relative;
top:50%;
transform: translateY(-50%);
}
How to Vertically Center a Bootstrap 4 Carousel slide during its transition?
All I do is set a flag to disallow recalculation function to run more than once at any given time. And I'm running it on window load and resize events. And I'm making all slides have equal heights.
let parsing = false, tCar = $('#testimonial_carousel'), reCalc = function() { if (!parsing) { parsing = true; $('.card').height('auto'); setTimeout(() => { let height = 0; $('.carousel-item', tCar).each(function() { height = Math.max(height, $(this).height()) }) $('.card',tCar).each(function() { $(this).height(height); }) tCar.height(height); parsing = false; }) } }$(window).on('load resize', reCalc);.testimonial-carousel-inner { height: auto;}.card { justify-content: space-around;}div.card-body { flex-grow: 0;}.card small{ padding: 15px;}#testimonial_carousel { transition: height .3s cubic-bezier(.4,0,.2,1);}.carousel-control-next-hidden,.carousel-control-prev-hidden { position: absolute; top: calc(50% - 25px); height: 50px; display: flex; align-items: center; justify-content: center; width: 50px; color: #fff; background-color: rgba(111, 111, 111, 0.2); text-align: center; opacity: .9}
.carousel-control-next-hidden:hover,.carousel-control-prev-hidden:hover { color: #fff; background-color: rgba(0, 115, 255, 0.5); text-decoration: none; outline: 0; opacity: 0.9;}
.carousel-control-prev-hidden { left: 3%}
.carousel-control-next-hidden { right: 3%}
.carousel-control-prev-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;}
.carousel-control-next-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<main> <div id="Testimonials" class="text-center bg-dark py-3"> <div class="container"> <div id="testimonial_carousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner testimonial-carousel-inner d-flex align-items-center" role="listbox"> <div class="carousel-item testimonial-carousel active"> <div class="card"> <div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies felis sed lectus porta, vitae vulputate turpis viverra. Suspendisse consectetur augue nulla, quis tincidunt nisi condimentum vitae. Cras congue tincidunt massa vel mattis. Quisque congue elit et mattis auctor. Nam dignissim dictum lacus id lacinia. Ut non accumsan nisi. Pellentesque.</div> <small>Anonymous</small> </div> </div> <div class="carousel-item testimonial-carousel"> <div class="card"> <div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui leo, interdum eu faucibus nec, ornare volutpat risus. Vestibulum sem nisl, imperdiet sed rutrum et, semper eu justo. Proin porttitor nisl turpis, imperdiet condimentum urna.</div> <small>Anonymous</small> </div> </div> <div class="carousel-item testimonial-carousel"> <div class="card"> <div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum gravida libero, eu elementum neque elementum sit amet. Sed ornare lectus non est luctus placerat. Donec et tristique purus. Ut vel ultrices quam. Sed aliquet, lacus sit amet vulputate imperdiet, augue ipsum gravida erat, eget rutrum ante dolor nec tellus. Praesent mattis, urna vel facilisis ullamcorper, velit arcu ultrices eros, et pellentesque nibh mi sit amet leo. Morbi porta metus vel sapien vulputate, quis congue massa tristique. Donec suscipit quis.</div> <small>Anonymous</small> </div> </div> </div> <a class="carousel-control-prev-hidden" href="#testimonial_carousel" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next-hidden" href="#testimonial_carousel" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> </div> </main>Related Topics
Is It Correct to Use Alt Tag for an Anchor Link
Does the <Li> Tag in HTML Have an Ending Tag
Embed Youtube Video - Refused to Display in a Frame Because It Set 'X-Frame-Options' to 'Sameorigin'
How to Do Awesome Refreshless Page Changes Like Github Do
Make Bootstrap's Carousel Both Center and Responsive
I Can't Get My Font-Awesome Icons to Show Up. Tried Importing CSS with Multiple Methods
Center HTML Input Text Field Placeholder
Is the HTML Shown via 'View Source' Different from the HTML Shown in (Firebug) Developer Tools
Restrict File Upload Selection to Specific Types
How to Run the CSS3 Animation to the End If the Selector Is Not Matching Anymore
How to Pass a Parameter to HTML
What Do <Form Action="#"> and <Form Method="Post" Action="#"> Do
Fill Remaining Vertical Space - Only CSS
Make Columns of Equal Width in <Table>
Flexbox: Wrong Width Calculation When Flex-Direction: Column, Flex-Wrap: Wrap