Utilizing CSS exclusively, you can achieve the desired layout using a combination of display table and table-cell properties. Although I had never experimented with this technique prior to this project, a bit of research led me to a solution that gave me a solid starting point.
The key is to create a container element with the display table property. Within this container, all other elements should have the table-cell property to ensure they stack correctly beside each other, mimicking the behavior of table cells.
Setting the height of your table-cells to 100% allows them to adjust according to the wrapper's height. This enables you to utilize the vertical align property for precise centering of navigation buttons.
To ensure responsiveness, apply the max-width 100% property to images. Avoid using Bootstrap's image responsive class as it may include unnecessary CSS properties that disrupt the layout.
I made adjustments to the HTML structure to ensure proper alignment of each element in the intended sequence.
VIEW WORKING EXAMPLE JSFIDDLE
HTML:
<div class="row">
<div class="col-xs-12">
<div class="image-container">
<div class="prev-btn nav-btn"> < </div>
<div class="inner-container">
<img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" class="center-block">
</div>
<div class="next-btn nav-btn"> > </div>
</div>
</div>
</div>
CSS:
.image-container{
display:table;
height: 100%;
text-align:center;
}
.inner-container{
display:table-cell;
width: 100%;
height: 100%;
padding: 0 15px;
vertical-align: middle;
text-align: center;
}
.inner-container img{
width: 100%;
height: auto;
max-width: 100%;
}
.nav-btn{
font-size:50px;
font-weight:700;
font-family: monospace;
color: #000;
cursor:pointer;
}
.nav-btn:hover{
color: #B6B6B6;
}
.prev-btn{
position: relative;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.next-btn{
position: relative;
height: 100%;
display: table-cell;
vertical-align: middle;
}