Выравнивание изображений по вертикали в owl-carousel

Очень часто возникает необходимость выравнивания изображений карусели по центру по вертикали. Я хочу продемонстрировать 2 способа такого выравнивания. Предположим, что наша карусель содержит изображения логотипов компаний наших партнёров, каждое из которых имеет разные размеры.

HTML структура карусели имеет следующий вид:

<div class="my-carousel">
 <div class="owl-carousel">
  <div class="my-item"><img src="images/1.png" alt=""></div>
  <div class="my-item"><img src="images/2.png" alt=""></div>
  <div class="my-item"><img src="images/3.png" alt=""></div>
  <div class="my-item"><img src="images/4.png" alt=""></div>
  <div class="my-item"><img src="images/5.png" alt=""></div>
  <div class="my-item"><img src="images/6.png" alt=""></div>
 </div>
</div>

Первый способ:

.my-item {
  height: 180px;
  position: relative;
  z-index: 10;
}
.my-item img {
  display: inline-block;
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 20;
}

Второй способ:

.my-carousel .owl-item {
  clear: both;
  display: inline-block;
  float: none;
  text-align: center;
  vertical-align: middle;
}
.my-carousel .owl-item img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  width: auto;
}

На мой взгляд второй способ выравнивания предпочтителен для использования в реальной вёрстке, так как здесь не задействуется фиксированное значение высоты.

Понравилась статья? Поделись: