Direction nav icons not centered vertically when using static position for control navs

[czirkoszoltan]

I use flexslider with the following setup:

.flex-control-nav {
    position: static;
    margin-top: 0.5em;
}

This way the height of the div containing the small control bullets is determined automatically by the browser, even if the gallery contains a lot of images.

However, flexslider appends the direction control buttons to the .flexslider container, not to .flex-viewport. Therefore the direction buttons are not centered vertically. Test case:

<div class="flexslider">
  <ul class="slides">
    <li><img src="http://lorempixel.com/200/200"></li>
    <li><img src="http://lorempixel.com/200/200"></li>
    <li><img src="http://lorempixel.com/200/200"></li>
    <!-- use 20-30 images here -->
  </ul>
</div>

This can be resolved by appending the direction navs to the viewport, instead of appending them to the container div. Also, the viewport is to be always created (which is a good idea, as one might want to apply some css, regardless the style of the animation).