將元素置於其父元素中

Question

我正在創建幻燈片，並且正在嘗試將其導航按鈕垂直居中放置在圖像上方。我嘗試使用頂端：50％，但它相對於按鈕的高度移動，而不是幻燈片的高度。我正在使用jQuery Cycle。

<div class="slideshow_container"> 
<h2>Amor Insecta</h2> 
<div class="slideshow_controls"> 
<div class="cycle_prev">&nbsp;</div> 
<div class="cycle_next">&nbsp;</div> 
</div> 
<div class="slideshow"> 
<img title="stylepageart2.jpg" src="http://cmpltunknwn.mybigcommerce.com/product_images/uploaded_images/stylepageart21.jpg" alt="stylepageart2.jpg" /> 
<img title="stylepageart3.jpg" src="http://cmpltunknwn.mybigcommerce.com/product_images/uploaded_images/stylepageart22.jpg" alt="stylepageart3.jpg" /> 
</div> 
</div> 

.slideshow_container { 
width:90%; 
margin: 0 auto 50px auto; 
max-height:2000px; 
} 

.slideshow { 
position: relative; 
width: 100% !important; 
} 

.slideshow img { 
width: 100% !important; 
height:auto !important; 
position: absolute; 
top: 0; 
left: 0; 
} 

.slideshow_controls { 
display:none; 
width:100%; 
height:100%; 
position:relative; 
z-index:100!important; 
} 

.cycle_prev, .cycle_next { 
position:absolute; 
top:50%; 
width:37px; 
height:37px; 
} 

.cycle_prev{ 
left:0; 
background:url(http://cmpltunknwn.mybigcommerce.com/product_images/theme_images/prev.jpg) no-repeat; 
} 

.cycle_next { 
right:0; 
background:url(http://cmpltunknwn.mybigcommerce.com/product_images/theme_images/next.jpg) no-repeat; 

} 

Answer 1

這不是一個理想的解決方案，但它對於你的代碼來說很有效。從上一個/下一個按鈕中刪除top: 50%，並在其容器中添加一個填充頂部：http://jsfiddle.net/4qSPr/

注意：我移除了display：none;箭頭的例子...的

CSS

.slideshow_controls { 
width:100%; 
height:100%; 
position:relative; 
z-index:100!important; 
padding-top: 30%; 
} 

.cycle_prev, .cycle_next { 
position:absolute; 
width:37px; 
height:37px; 
}