Вертикальный список центра в div

Question

У меня есть div фиксированных размеров и неупорядоченный список внутри него. Элементы списка расположены горизонтально один рядом с другим. То, что я пытаюсь сделать, - это слайдер, который показывает один элемент списка за другим. То, что я не могу сделать, - это центрировать список и элементы по вертикали внутри 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