如何在 owl 轮播中将 img 居中？

Question

我目前正在尝试将一张小图片放在 owl 旋转木马的中央。我确实弄清楚了，当它处于活动状态并位于中心时如何执行此操作，但是当不再使用 class 中心定义该项目时它不起作用。

这是我使用的 Owlcarousel link：https://github.com/OwlCarousel2/OwlCarousel2/releases

类：居中且活跃

类：活跃

它应该是什么样子

这是网站上 HTML 的屏幕截图 (F12)

我的HTML代码：

<section class="wrapper_bewertungen">
   <div class="bewertungen_wrap">
      <h2>Das sagen unsere Kunden</h2>
      <div id="testimonial-slider" class="owl-carousel">
         <div class="testimonial">
            <div class="testimonial-content">
               <div class="Picture"><img src="static\img\Partypeople\Man1.png" alt="Man1" width="50" height="274"></div>
            </div>
            <h3 class="title">Mike<span> - Umkreis Köln</span></h3>
         </div>
         <div class="testimonial">
            <div class="testimonial-content">
               <p class="description">
                  So einfach sollte ein Autoverkauf immer ablaufen.
               </p>
            </div>
            <h3 class="title">Sophia<span> - Umkreis Bielfeld</span></h3>
         </div>
         <div class="testimonial">
            <div class="testimonial-content">
               <p class="description">
                  Vielen Dank für den tollen Service, ich empfehle Sie auf jeden Fall weiter!
               </p>
            </div>
            <h3 class="title">Thorsten<span> - Umkreis Bayern</span></h3>
         </div>
         <div class="testimonial">
            <div class="testimonial-content">
               <p class="description">
                  Hat schnell und Problemlos geklappt, gerne wieder.
               </p>
            </div>
            <h3 class="title">Markus<span> - Umkreis Hamburg</span></h3>
         </div>
         <div class="testimonial">
            <div class="testimonial-content">
               <p class="description">
                  Genau die richtigen Gefunden um mein Auto zu verkaufen.
               </p>
            </div>
            <h3 class="title">Meryem<span> - Umkreis Bonn</span></h3>
         </div>
         <div class="testimonial">
            <div class="testimonial-content">
               <p class="description">
                  Ohne großen Zeitaufwand mein Auto verkauft. Super
               </p>
            </div>
            <h3 class="title">Jonas<span> - Umkreis Aachen</span></h3>
         </div>
      </div>
   </div>
</section>

我的 SCSS 代码：

.owl-carousel {
  .owl-item {
    img {
      height: 80px;
      width: auto !important;
      border-radius: 20px;
      border: 1px solid black;
      filter: drop-shadow(5px 5px 2px #a0a0a0);
    }
  }
}

.wrapper_bewertungen {
  height: 400px;

  h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 30px;
  }
  .bewertungen_wrap {
    width: calc(100% - 20px);
    max-width: 1100px;
    margin: 0 auto;
    .center {
      transform: scale(1.1);
      .testimonial {
        transition: all 1s;
        padding: 20px 20px 10px;
        background-color: white;
        color: rgb(0, 0, 0);
        border: 6px solid $primary-color;
        margin: 20px;
        .title {
          padding-top: 10px;
          border-top: 3px solid #fff;
          span {
            font-size: 15px;
          }
        }
        .active {
          .Picture {
            display: flex !important;
            justify-content: center !important;
            img {
              height: 60px;
              width: auto;
            }
          }
        }
        .Picture {
          display: flex;
          justify-content: center;
          img {
            height: 80px;
            width: auto;
            border-radius: 20px;
            border: 1px solid black;
            filter: drop-shadow(5px 5px 2px #a0a0a0);
          }
        }
      }
    }
  }
}

owl 轮播设置：

$("#testimonial-slider").owlCarousel({
    items: 1,
    loop: true,
    autoplay: false,
    dots: false,
    center: true,
    responsiveClass: true,
    responsive: {
        700: {
            items: 3,
            autoplay: true,
            autoplayTimeout: 5000,
            smartSpeed: 1000
        }
    },

});

Answer 1

尝试设置推荐class以使用这些样式

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

Answer 2

您可以将照片居中，如下所示。

希望对您有所帮助。

.Picture {
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
}

如何在 owl 轮播中将 img 居中？

How to center an img inside of a owl carousel?

html

javascript

css

sass

owl-carousel