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
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>Vertically align image inside a bootstrap carousel
Try this and see if it helps:
First make you .item position relative and give it a height of 100% so it takes up the same height as the container .carousel-inner
.item{
position: relative;
height:100%;
}
Then next add you absolute position styles back to your .carousel-img element
.carousel-img {
...
position: absolute;
top: 50%;
transform: translateY(-50%);
}
See this fiddle for an example.
Also I noticed that you have static heights on your carousel (550px) and on your carousel-img (400px) so you could just add margin-top:75px; to your .carousel-img
See this fiddle.
Center bootstrap carousel text vertically, weird issue
Is this (Slide 2) what you are looking for? I think you just need to put .container inside of .center-vertically-right.
bootstrap carousel center image vertical and horizontal
We can achieve this using display table & display table cell.
.item row{
display:table;
}
.img-center-vertical{
display:table-cell;
vertical-align:middle;
height:300px;
float: inherit;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<div class="container">
<div class="col-md-12 text-align-center">
<h2 class="bold_font">FEATURED PARTNERS</h2><br>
</div>
<div class="row">
<div class="col-xs-4">
<a href="../cards/list-partners.php">
<div class="hvrbox">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive hvrbox-layer_bottom">
<div class=" hvrbox-mwc-orange hvrbox-layer_top hvrbox-layer_slideright">
<div class="hvrbox-text">
<h2>BROWSE<br>PARTNERS</h2>
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-8">
<div id="imageCarousel" class="carousel slide" data-interval="false" data-ride="carousel" data-pause="hover" data-wrap="true">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-6 img-center-vertical">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
<div class="col-md-6 img-center-vertical">
<img src="http://placehold.it/200/f44336/000000" class="img-responsive">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-6 img-center-vertical">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
<div class="col-md-6 img-center-vertical">
<img src="http://placehold.it/200/f44336/000000" class="img-responsive">
</div>
</div>
</div>
</div>
<a href="#imageCarousel" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#imageCarousel" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>Related Topics
Play Infinitely Looping Video On-Load in HTML5
Flexbox on Ie11: Image Stretched for No Reason
Get Input Type=Text to Look Like Type=Password
Aligning Elements Left and Center with Flexbox
Placing a <Div> Within a <Canvas>
How to Center-Align One Flex Item and Right-Align Another Using Flexbox
Making a Paragraph in HTML Contain a Text from a File
Absolute Position and Overflow:Hidden
It Is Possible to Expand a Textarea Only with CSS
Do HTML5 Script Tag Need Type="Javascript"
How to Disable the Spell Checker on Text Inputs on the Iphone
Changing the Text Selection Color Using CSS
How to Make a Sticky Footer Using Flexbox in Ie11
Change Background Image Opacity
How to Add Background Image for Input Type="Button"
How to Make Child Divs Use All Available Space When One Makes the Container Scroll
Flexbox with Fixed Header and Footer and Scrollable Content
How to Display Previous and Next Images with a Bootstrap Carousel