左と右のフローティング矢印

Question

ビューをスクロールするためのイメージを含むdivの左右に垂直に中央に小さな矢印を付けてイメージを水平に積み重ねたビューを作成する際に問題が発生しています。

矢印は中央の画像ではなく、ページの中央になります。

私はそれは次のようになり作るしようとしています： http://www.vanleeuwenicecream.com/

私は、可能な場合だけCSS/HTMLで配置されるように、左と右の矢印をしたいと思います。ここで

は、私がこれまで持っているものです。 任意の助けいただければ幸い https://github.com/thorkia/cssPositioningIssue

注：

私が含むdiv要素に左マージンを変更することにより、ビューのスクロール罰金を行うことができますjsで画像。私はそのサンプルを削除しました。私はちょうど正しく

Answer 1

.imagesContainer { 
 
    width: 100%; 
 
    height: 500px; 
 
    position: relative; 
 
    background: red; 
 
} 
 

 
.imageScrollers .imageScrollBack img { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: auto; 
 
    height: 20px; 
 
} 
 

 
.imageScrollers .imageScrollNext img { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    height: 20px; 
 
}

<div class="imagesContainer"> 
 

 
    <div class="imageScrollers"> 
 
    <span class="imageScrollBack"><img src="dawdaw" alt=""></span> 
 
    <span class="imageScrollNext"><img src="dawdaw" alt=""></span> 
 
    </div> 
 
</div>