在 owl carousel、Canvas 中垂直居中项目

Question

我正在尝试 (1) 让图像轮播以垂直居中图像，以及 (2) 让轮播缩小到最小图像的高度 [即没有浪费空白]。这是一种“多图像”轮播，例如：https://bbbootstrap.com/snippets/clients-brand-logo-carousel-slider-20683486。

我不知道在哪里添加什么类。显然看了d-flex + justify-items + align-items，以及其他一些SO帖子建议我将oc-item和相关类更改为height: 100%; position: relative;，但这些似乎都没有达到预期的效果。

鉴于命名，我假设这是 owl carousel (https://owlcarousel2.github.io/OwlCarousel2/) 的实现。

HTML，其中包括许多通过 JS 添加的元素（不是我的 JS，我使用的是从 Themeforest 购买的包，名为 Canvas https://themes.semicolonweb.com/html/canvas/blocks.html..。我认为它是本页底部的那个 @ 987654324@ 此页面的 CSS 和 JS 应该与我使用的相同）：

<section id="content">
  <div class="content-wrap p-0" id="content-wrap-logos">
    <div class="container">
        <div class="fancy-title title-center title-border m-4">
          <h4><small>AS SEEN WITH</small></h4>
        </div>
        <div id="oc-images" class="owl-carousel image-carousel carousel-widget align-middle align-items-center owl-loaded owl-drag with-carousel-dots" data-items-xs="2" data-items-sm="3" data-items-lg="4" data-items-xl="5">
           <div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 2369px;">
               <div class="owl-item active" style="width: 243.2px; margin-right: 20px;">
                 <div class="oc-item">
                     <a href="..." target="_blank"><img src="..." alt="..."></a>
                 </div>
              </div>
              <div class="owl-item active" style="width: 243.2px; margin-right: 20px;">
                 <div class="oc-item">
                     <a href="..." target="_blank"><img src="i..." alt="..."></a>
                 </div>
              </div>
              ... etc ...
           </div>
       </div>
       <div class="owl-nav">
         <button type="button" role="presentation" class="owl-prev disabled">
            <i class="icon-angle-left"></i>
         </button>
         <button type="button" role="presentation" class="owl-next">
            <i class="icon-angle-right"></i>
         </button>
       </div>
       <div class="owl-dots">
         <button role="button" class="owl-dot active"><span></span></button>
         <button role="button" class="owl-dot"><span></span></button></div></div>
       </div>
    </div>
  </div>
</section>

Answer 1

您没有共享 css 代码，但这里是解决方案。

给锚显示块，最小高度和垂直对齐中间。所以图像垂直居中。

.owl-item a {
    display: block;
    vertical-align: middle;
    min-height: 38px;
}