将元素居中于其父元素中

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

这不是理想的解决方案，但对于您的代码，它可以正常工作。从prev / next按钮中删除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;
}