Как центрировать элементы li как вид сетки

Question

У меня есть следующие code. Это по существу простой вид сетки, который использует <ul> и <li> теги. Я хотел сделать его отзывчивым, чтобы элементы <li> всегда были центрированы независимо от ширины экрана. Как я могу это сделать? Я попытался установить padding-left и padding-right в процентах, однако это не сработает. Прямо сейчас, если я отрегулирую ширину экрана, он не всегда остается центрированным.

Answer 1

Просто добавьте text-align: center родителю <ul>

Fiddle

Answer 2

Я простираться на предыдущий ответ ...

Также отцентрировать UL

#home-listing { 
    text-align: center; 
    width:80%; /*Pick Your Own Width*/ 
    margin:16px auto; 
} 

http://jsfiddle.net/Zd9Gf/3/

Answer 3

Это зависит от того, что вы имеете в виду по центру. Для того, чтобы центрировать весь список вы могли бы сделать что-то вроде:

ul { 
    padding: 0px; 
    width:500px; 
    margin:auto; 
} 

this jsFiddle См.

Answer 4

добавить этот класс:

ul.search-results{ 
    width:100%; 
} 

и обновить этот класс:

ul.search-results li { 
border-right: 1px solid #cecdcb; 
border-bottom: 1px solid #cecdcb; 
border-top: 1px solid #fff; 
list-style: none; 
padding: 0; 
display: inline-block; 
vertical-align: top; 
    width:60%; 
    margin:0 20%; 
    text-align:center; 
}