5ervant 5ervant - 2 years ago 94
Javascript Question

Vertically center the showing images on a fixed height Bootstrap carousel

Maybe this is one of the toughest challenges, how can I vertically align in the middle the showing images on this fixed height Bootstrap (v3.3.5) carousel? I'd tried to

some classes as a
them to
but there's still a problem, the sliding image will just be vertically aligned when sliding-completed or when
but it will also placed the image on the right side instead to the center.

/* The styles that I tried.
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
display: table-cell;
vertical-align: middle;
} */

.carousel-inner > .item {
height: 150px;

.carousel-inner img {
margin: auto;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/350x65" alt="350x65">
<div class="carousel-caption">
<h3>Item 1</h3>
<p>Not vertically center..</p>
<div class="item">
<img src="http://placehold.it/350x150" alt="350x150">
<div class="carousel-caption">
<h3>Item 2</h3>
<p>The image height is just fit..</p>
<div class="item">
<img src="http://placehold.it/200x100" alt="200x100">
<div class="carousel-caption">
<h3>Item 3</h3>
<p>Not vertically center..</p>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Answer Source

Add this to your css:

.carousel-inner .item img {
    transform: translateY(-50%);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download