responsive design - Bootstrap span1 horizontal positioning -

i have example here of problem

http://patrickmchugh.com/template-image-nav-bootstrap.html trying have navigation arrows on either side of image sit half way down window.

i have tried tables, padding, margins have not been successful. suggestions

    <div class="container-fluid">         <div class="row-fluid">                 <div class="span1">                     <img src="images/leftarrow.png" alt="back 1 image"></div>         <div class="span10 pagination-centered">                     <img src="images/fashion-1.jpg" alt="fashion-photo"></div>         <div class="span1">                     <img src="images/rightarrow.png" alt="next"></div>         </div>     </div> 

i'd use position: absolute top: 50%. negative margin-top of have arrow image height makes vertically centered.

make <div> surrounding image display: inline-block make large wide image instead of full screen. padding makes arrows fall beside image instead of on them. add container center all.

<div class="mycontainer">     <div class="mycarousel">         <img class="arrow-prev" src="http://patrickmchugh.com/images/leftarrow.png" alt="previous" />         <img class="arrow-next" src="http://patrickmchugh.com/images/rightarrow.png" alt="next" />         <img src="http://patrickmchugh.com/images/fashion-1.jpg" alt="fashion-photo" />     </div> </div> 

the css

.mycontainer {     text-align: center; }  .mycarousel {     position: relative;     padding: 0 25px;     display: inline-block;     max-width: 100%; }  .mycarousel img {    max-width: 100%;     } .arrow-prev {     position: absolute;     left: 0;     top: 50%;     margin-top: -7px; }  .arrow-next {     position: absolute;     right: 0;     top: 50%;     margin-top: -7px; } 

see jsfiddle