div의 세로 가운데 목록

Question

고정 된 차원의 div와 그 안에 정렬되지 않은 목록이 있습니다. 목록의 항목은 서로 나란히 가로로 배치됩니다. 내가 만들고자하는 것은 하나의 목록 요소를 다른 요소 다음에 보여주는 슬라이더입니다. 내가 목록의 높이를 알지 못하기 때문에 내가 할 수없는 일은 목록과 요소를 세로 가운데에 배치하는 것입니다.

HTML

<div id="container"> 
    <ul> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
    </ul> 
</div> 

CSS

#container { 
    width: 584px; 
    height: 50px; 
    position: relative; 
    overflow: hidden; 
} 

#container ul { 
    position: absolute; 
    margin: 0; 
    padding: 0; 
    width: 3504px; 
} 

#container ul li { 
    width: 584px; 
    float: left; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

CSS에서이 작업을 수행하기 위해 모든 가능한 방법 :

여기 내 코드입니까?

Answer 1

정말 오버플로 숨김 및 거대한 너비 값의 필요성을 이해하지 못했지만 예상 한대로 만들었습니다.

display:table-cell과 vertical-align:middle을 사용하면 콘텐츠를 수직 가운데로 정렬 할 수 있습니다.

어쩌면

#container { 
    width: 584px; 
    height: 50px; 
    position: relative; 
} 
#container ul { 
    margin: 0; 
    padding: 0; 
} 
#container ul li { 
    width: 100px; 
    background:grey; display:table-cell; 
    border:white solid 2px; 
    vertical-align:middle; 
    margin: 0; 
    padding: 0; 
} 

DEMO