如何在猫头鹰旋转木马内居中img？

Posted 2023-05-07

【中文标题】如何在猫头鹰旋转木马内居中img？

【英文标题】：How to center an img inside of a owl carousel?

【发布时间】：2022-01-08 18:38:13

【问题描述】：

我目前正在尝试在猫头鹰旋转木马的中心放置一个小图像。我确实弄清楚了，当它处于活动状态并位于中心时如何做，但是当项目不再使用类中心定义时它不起作用。

这是我使用的 Owlcarousel 的链接：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"   ></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);
          
        
      
    
  

猫头鹰轮播设置：

$("#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
        
    ,

);

【参考方案1】：

您可以使用以下内容将照片居中。

希望我能帮上忙。

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

【讨论】：

是的，非常感谢！！

【参考方案2】：

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

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

【讨论】：

首先感谢您的回答，我试了一下，还是不行。结果还是一样。

我想我明白为什么我无法在 codepen 中调试它，owlslider 库在初始化时是否添加了样式？我注意到“owl-loaded”不在您提供的标记中

你说得对，owl滑块库在初始化的时候添加了一些样式，你也可以看到我在顶部提供的第4张图片。

我在顶部添加了我使用的包。