부모 요소에 요소 가운데 맞추기

Question

슬라이드 쇼를 만들고 있는데 이미지 위의 탐색 버튼을 세로로 가운데에 놓으려고합니다. 나는 top : 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/

참고 : 디스플레이를 제거했습니다. 예제의 화살표 ...의

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; 
}