Поместите список с абсолютным положением в середине div с CSS

Question

У меня есть небольшая проблема с некоторым дизайном.

У меня это очень простой HTML:

<div> 
    <ul> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
</div> 

Это лишь малая часть большого виджета. Чтобы сделать Thsi виджет работы, мне нужно хотя бы этот CSS:

div { 
    position: relative; 
    width: 400px; 
    height: 200px; 
} 

ul { 
    z-index: 99; 
} 

li { 
    display: block; 
    float: left; 
    width: 16px; 
    height: 16px; 
} 

Теперь я хочу, чтобы поместить список вниз в гущу дел. Нет проблем с его установкой, но для меня невозможно поставить его в середину. Список может содержать любое количество элементов.

JSfiddle: http://jsfiddle.net/MBxNU/1/

До сих пор я пытался, например:

ul { 
    width: 100%; 
    display: block; 
    text-align: center; 
} 

Но это не работало, и я понятия не имею, почему.

Если бы вы могли мне помочь, я был бы признателен.

Answer 1

Ваш код с текстом выравнивать: центр не потому что вы разместили элементы внутри ul. Вы можете использовать дисплей: встроенный блок вместо поплавка:

li { 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    background-color: red; 
    margin: 5px; 
} 

JSfiddle: http://jsfiddle.net/caprella/r2RjM/1/

Answer 2

Здесь вы;)

div { 
    position: relative; 
    left: 20px; 
    top: 20px; 
    background-color: #EEE; 
    width: 400px; 
    text-align: center; 
    height: 200px; 
} 

ul { 
    padding: 0; 
    display: inline-block; 
    z-index: 99; 
    list-style: none inside; 
} 

li { 
    float: left; 
    width: 16px; 
    height: 16px; 
    background-color: red; 
    margin: 5px; 
} 

Таким образом, основная идея заключается в том, чтобы установить text-align: center для родителей div и display: inline-block для ul, это все)