如何让Owl Carousel轮播组件内部的img元素始终居中显示

失效原因 #

你当前的图片居中样式全部嵌套在.center选择器作用域下，只有Owl Carousel标记为当前居中的轮播项才会触发该样式，非居中轮播项没有匹配到对应样式，所以居中失效。同时你原有代码中嵌套在.center .testimonial下的.active规则层级错误，不会生效，可以直接删除。

修改方案 #

将通用的图片容器居中样式抽离为公共规则，仅在.center下保留居中项的差异化样式，修改后的SCSS代码如下：

// 可删除原有最外层.owl-carousel下的img样式，避免重复冲突
.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;
    /* 所有轮播项通用样式 */
    .testimonial {
      .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);
        }
      }
    }
    /* 当前居中轮播项的特殊样式 */
    .center {
      transform: scale(1.1);
      .testimonial {
        transition: all 1s;
        padding: 20px 20px 10px;
        background-color: white;
        color: #000;
        border: 6px solid $primary-color;
        margin: 20px;
        .title {
          padding-top: 10px;
          border-top: 3px solid #fff;
          span {
            font-size: 15px;
          }
        }
        // 仅调整居中项的图片高度
        .Picture img {
          height: 60px;
        }
      }
    }
  }
}

修改后所有轮播项的图片容器都会默认应用flex居中规则，即可实现预期效果。

内容的提问来源于stack exchange，提问作者Kuriboh