owl carousel, navigation center

Question

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);
  }
});

Answer 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%;
}

Answer 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;
}

Answer 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%;
 }