owl carousel, navigation center

问题

I use owl carousel plugin, can't find how to let navigation vertical align center, with option autoHeight.

http://codepen.io/anon/pen/jJAHL

I tried like below, but it only get last height.

$(this_gallery).owlCarousel({
  singleItem: true,
  autoHeight : true,
  navigation:true,
  // autoPlay : 2000,
  stopOnHover : true,
  afterAction: function() {
    var center_height = $(this_gallery).find('.owl-wrapper-outer').height();
    console.log(center_height);
    // $(this_gallery).find('.owl-buttons').css('top', center_height);
  }
});

回答1:

Instead of giving top position in the pixel give it in the percentage like following:

.owl-theme .owl-controls .owl-buttons .owl-prev {
    left: -45px;
    top: 45%;
}

回答2:

a bit late maybe but this worked well for me and might help others:

#photos .owl-nav{
    position: absolute;
    top: 45%;
    width: 100%;
}
#photos .owl-prev{
    float:left;
 }
#photos .owl-next{
    float:right;
}

回答3:

Change css for prev and next buttons

.owl-theme .owl-controls .owl-buttons .owl-next,.owl-theme .owl-controls .owl-buttons .owl-prev
 {
    top:40%;
 }

回答4:

You can try this:

.owl-nav div {
      position: absolute;
      left: -50px;
      top: 45%;
      color: $theme-color;
      display: table;
      &.owl-next {
        left: auto;
        right: -50px;
      }
    }

来源：https://stackoverflow.com/questions/24904146/owl-carousel-navigation-center