css - コンテンツ上の div 内で div を中央に配置する (簡単な賛成票)

Question

私は次のフィドルを作りました：

http://jsfiddle.net/hxQE4/

右矢印が画像を押し下げる様子をご覧ください。内部の画像のサイズに関係なく、右矢印を大きな div の中央に配置したいと思います。絶対配置を使用することはできませんが、そこにある画像に関係なく、矢印を div に対して中央に配置したいと思います (div の開始から約 300 ピクセル下)。

Answer 1

手っ取り早い解決策の 1 つは、ボタン (.slider-right) を含むスパンを高さ 100% に設定してから、"position: relative; top: 50%;" を適用することです。ボタン (.slider-right .circle) に移動します。これにより、ボタンの上部が中間点に配置されるため、48% または最も見栄えの良いものに少し調整する必要がある場合があります。

また、そのルートに行った場合は、含まれているスパンから上部マージンを削除する必要があります。そうしないと、ボタンがその量だけドロップダウンします。

また、スパンの中に div があることにも気付きました。ブロック レベルの要素 (div など) をインライン レベルの要素 (スパンなど) 内に配置することは避けてください。そのままでは検証に失敗する可能性があります。


更新さ れたCSS：

.slider-right {
position: relative;
float: right;
height: 100%;
margin-top: 0px;
position: relative;
right: 6px;
width: 32px;
z-index: 30;
}

.circle{
position: relative;
top: 48%;
display:table;
line-height:30px;
width:10px;
height:10px;
padding:3px 5px 3px 7px;
border:2px solid #CFC5CD;
border-radius:21px;
background: #000000; /* Old browsers */
opacity: .99;
}