幅と高さが異なるdiv内で画像を水平方向と垂直方向にセンタリング

Question

大きなdiv内の画像の両側に前後の矢印を配置する必要があります。 divの幅と高さは、画像のサイズによって異なります。

私はこれまでのところ、ここで私の仕事のライブバージョンを持っている：ここ http://danapaigetrentlage.com/cfsa-comps/lff-aboutgoods.html

と一緒にプレイするjsfiddleです：私はリンクされた画像なしとなりますどのくらいの使用を知らないけれどもhttp://jsfiddle.net/thwackukulele/4zHyd/

画像の両側の青色の領域の上部に、前方および後方の矢印が表示されます。私はこれらの青い領域内に水平に、垂直にセンタリングされることを望みます。

私は多くのポジショニングを使用していることを知っています。このレイアウトを攻撃するために全面的に良い方法がある場合は、教えてください。これは私が思いつくことができる最高です。私は結局、データベースのCMS機能を追加している開発者にこれらのレイアウトを渡しています。だから私のコードは完璧である必要はありません、彼は理解できるように私の意図を説明するだけです。

事前にお問い合わせいただきありがとうございます。

Answer 1

.framewrap-fb{ position:relative; } 
.rightarrow, .leftarrow{ position:absolute; top:50%; margin-top:-32px; width:64px; height:64px} 
.leftarrow{left:0} 
.rightarrow{right:0} 

Answer 2

私が質問を理解しているかわかりません。読めるコードがたくさんあり、フォーカスエリアにコードを投稿するだけかもしれません。

試してみてください。

.wrapper{ 
     position:relative; 
    } 
    .left_arrow{ 
     position:absolute; 
     left:0; 
     top:50%; 
    } 
    .right_arrow{ 
     position:absolute; 
     right:0; 
     top:50%; 
    } 

Answer 3

ソリューションは、絶対的な位置にあり、50％のトップとそのリンクの高さの負の半分のマージントップでのdivへのリンク：

http://jsfiddle.net/elclanrs/JKqnm/

HTML：

<div> 
    <img /> 
    <a id="next"></a> 
    <a id="prev"></a> 
</div> 

の

CSS：

div { 
    position: relative; 
    height: 300px; /* Set size */ 
    width: 500px; 
    background: blue; 
} 
#prev, #next { 
    position: absolute; 
    width: 24px; 
    height: 24px; 
    top: 50%; 
    margin-top: -12px; 
    background: red; 
} 
#prev { 
    left: -48px; 
} 
#next { 
    right: -48px; 
}