So zentrieren Sie die Bilder im Eulenkarussell

Question

Mein Eulenkarussell enthält Bilder unterschiedlicher Breite und Höhe. Wie richte ich sie in der Mitte aus - sowohl horizontal als auch vertikal?

$("#owl-example").owlCarousel({ 
 
    navigation: true 
 
});

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css"> 
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css"> 
 

 
<div id="owl-example" class="owl-carousel"> 
 
    <div><img src="//placehold.it/120x120/69c/fff/" alt=""></div> 
 
    <div><img src="//placehold.it/200x200/c69/fff/" alt=""></div> 
 
    <div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div> 
 
    <div><img src="//placehold.it/240x240/fc6/fff/" alt=""></div> 
 
    <div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div> 
 
    <div><img src="//placehold.it/200x200/c69/fff/" alt=""></div> 
 
    <div><img src="//placehold.it/120x120/69c/fff/" alt=""></div> 
 
</div> 
 

 
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

Answer 1

1. Die Eule Karussell schafft zusätzliche Blöcke im Layout. So fügen Sie CSS-Eigenschaften korrekt, müssen Sie mit dieser HTML-Struktur arbeiten:

   <div id="owl-demo" class="owl-carousel owl-theme"> 
       <div class="owl-wrapper-outer"> 
       <div class="owl-wrapper"> 
        <div class="owl-item"> 
        <div> 
         <img src="" alt=""> 
        </div> 
        </div> 
        <div class="owl-item"> 
        <div> 
         <img src="" alt=""> 
        </div> 
        </div> 
       </div> 
       </div> 
   </div> 
   

2. Darüber hinaus wird das Karussell fügt ein style Attribut für alle Blöcke. Beispiel: Ein Block mit der Klasse .owl-wrapper erhält die Eigenschaft display mit dem Wert block. Sie müssen also eine !important Deklaration in Ihrem CSS verwenden.

3. Um eine horizontale Ausrichtung zu erhalten, können Sie einfach die text-align: center;-Eigenschaft zu jedem .owl-item > div hinzufügen.

4. Um vertikal auszurichten, können Sie die Karussellelemente in Tabellenzellen drehen. Aber vergessen Sie nicht, die float Eigenschaft für sie zu stornieren.

uns alle Änderungen als neue .owl-centered Klasse vereinbaren lassen. Bitte überprüfen Sie das Ergebnis:

https://codepen.io/glebkema/pen/BzgZxX

$("#owl-example").owlCarousel({ 
 
    navigation: true 
 
});

@import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css'); 
 
@import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css'); 
 

 
.owl-centered .owl-wrapper { 
 
    display: table !important; 
 
} 
 
.owl-centered .owl-item { 
 
    display: table-cell; 
 
    float: none; 
 
    vertical-align: middle; 
 
} 
 
.owl-centered .owl-item > div { 
 
    text-align: center; 
 
}

<div id="owl-example" class="owl-carousel owl-centered"> 
 
    <div><img src="//placehold.it/120x120/69c/fff/" alt=""></div> 
 
    <div><img src="//placehold.it/200x200/c69/fff/" alt=""></div> 
 
    <div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div> 
 
    <div><img src="//placehold.it/240x240/fc6/fff/" alt=""></div> 
 
    <div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div> 
 
    <div><img src="//placehold.it/200x200/c69/fff/" alt=""></div> 
 
    <div><img src="//placehold.it/120x120/69c/fff/" alt=""></div> 
 
</div> 
 

 
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

Answer 2

Mit Eule Karussell Version 2.1.1 und CSS3 Flexbox, fügen Sie einfach den Stil:

.owl-carousel .owl-stage { 
    display: flex; 
    align-items: center; 
} 

das Snippet Siehe:

$(document).ready(function() { 
 
    $('.owl-carousel').owlCarousel({ 
 
    autoplay: true, 
 
    margin: 2, 
 
    loop: true, 
 
    responsive: { 
 
     0: { 
 
      items:1 
 
     }, 
 
     200: { 
 
      items:3 
 
     }, 
 
     500: { 
 
      items:4 
 
     } 
 
    } 
 
    }); 
 
});

.owl-carousel .owl-stage { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.owl-carousel .caption { 
 
    text-align: center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/> 
 

 
<div class="owl-carousel"> 
 
    <div class="item"> 
 
     <img src="http://lorempicsum.com/up/350/200/1"> 
 
     <div class="caption">Caption 1</div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://lorempicsum.com/up/255/200/2"> 
 
     <div class="caption">Caption 2</div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://lorempicsum.com/up/627/200/3"> 
 
     <div class="caption">Caption 3</div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://lorempicsum.com/up/627/300/4"> 
 
     <div class="caption">Caption 4</div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://lorempicsum.com/up/627/400/5"> 
 
     <div class="caption">Caption 5</div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://lorempicsum.com/up/255/200/6"> 
 
     <div class="caption">Caption 6</div> 
 
    </div> 
 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

Answer 3

Dies funktioniert für mich:

@media (max-width:500px) { 
    .owl-carousel .owl-item { 
     text-align:center; 
    } 
    .owl-carousel .item { 
     float: none; 
     display: inline-block; 
    } 
} 

Sie es zu Ihrem HTML obwohl anpassen könnte, aber die Idee ist, dass Sie eine übergeordnete text-align und float: none und display: inline -Blockieren Sie das Kind, das den Inhalt enthält, auf Handy:

Answer 4

Die Lösung mit Anzeigetabelle ist OK, aber für mich gleitet die Divs auf der rechten und linken Seite aus dem Container.Mein Code ist in der Nähe der gleiche, ich änderte die table und table-cell-block und inline-block

.owl-stage{ 
    display: block !important; 
} 

.owl-item{ 
    display: inline-block; 
    float: none; 
    vertical-align: middle; 
} 

.item{ 
    text-align: center; 
} 

Das Ergebnis (alle Bilder unterschiedlicher Größe hat):