Flexslider captions Middle of image
<?php
$banner_images = array() ;
$banner_button = array();
if( have_rows('home_gallery') ):
while( have_rows('home_gallery') ): the_row();
$banner_images[] = get_sub_field('banner_image');
$banner_button[] = get_sub_field('banner_button');
endwhile; endif;
?>
<div class="flexslider">
<ul class="slides">
<?php
$i = 0;
foreach ( $banner_images as $banner_image ) : ?>
<li>
<img src="<?php echo $banner_image ; ?>">
<div class="flex-caption">
<div class="banner_title"><?php echo $banner_button[$i] ; ?></div>
</div>
</li>
<?php $i++; endforeach; ?>
</ul>
</div>
<style>
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
position: relative;
}
.flex-caption {
position: absolute;
left: 0;
right: 0;
bottom: 50%;
padding: 10px;
opacity: 1;
text-align: center;
color: #fff !important;
}
</style>