Cómo centrar las imágenes en el Carrusel de Búhos

este problema se puede tratar de diferentes maneras, pero en este caso te compartimos la que en nuestra opinión es la respuesta más completa.

Solución:

Con owl carrusel versión 2.1.1 y CSS3 Flexbox, solo agrega el estilo:

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

Ver el fragmento:

$( 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;

    

      






      
Caption 1
    
    

      
      
Caption 2
    
    

      
      
Caption 3
    
    

      
      
Caption 4
    
    

      
      
Caption 5
    
    

      
      
Caption 6
    

1. El carrusel de búhos crea bloques adicionales dentro de su diseño. Para agregar propiedades CSS correctamente, debe trabajar con esta estructura HTML:

2. Además, el carrusel añade un style attribute a todos los bloques. Por ejemplo, un bloque con el .owl-wrapper la clase recibe el display propiedad con el valor de block. Así que tienes que usar un !important declaración en su CSS.

3. Para obtener una alineación horizontal, simplemente puede agregar text-align: center; propiedad a cada uno .owl-item > div.

4. Para alinearlos verticalmente, puede girar los elementos del carrusel en las celdas de la tabla. Pero no te olvides de cancelar la float propiedad para ellos.

Organicemos todos los cambios como un nuevo .owl-centered clase. Por favor, compruebe el resultado:

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

Esto funciona para mí:

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

Sin embargo, puede ajustarlo a su HTML, pero la idea es que alinee con texto a un elemento principal, y flote: ninguno y muestre: bloquee en línea al elemento secundario que contiene el contenido, en el dispositivo móvil:

---

---

Utiliza Nuestro Buscador