Как разместить объекты li в quicksand плагин jQuery

Question

Моя проблема заключается в том, что в некоторых разрешениях экрана элементы списка не находятся в центре div, а <ul> - центрированы.
Кто-нибудь знает решение?
Спасибо!

HTML:

<ul class="news-grid"> 
    <li></li> 
    <li></li> 
</ul> 

Сценарий:

$(function() { 
    $('#buttons a').click(function(e) { 
     $.get($(this).attr('href'), function(data) { 
      $('.news-grid').quicksand($(data).find('li'), {adjustHeight: 'dynamic'}); 
     }); 
     e.preventDefault(); 
    }); 
}); 

CSS:

.news-grid { 
    overflow: hidden; 
    margin: 0px; 
    padding-left: 0px; 
    width: 100%; 
    line-height: 1.4em; 
} 

.news-grid:after { 
    content: ""; 
    display: block; 
    height: 0; 
    overflow: hidden; 
    clear: both; 
} 

.news-grid li { 
    display: block; 
    float: left; 
    width: 217px; 
    text-align: left; 
    line-height: 17px; 
    color: #686f74; 
    height: 268px; 
    overflow: hidden; 
    background: url(../images/item_png8.png) no-repeat top left; 
    margin: 0px 0px 20px 30px; 
} 

Answer 1

Вы можете сделать это довольно легко, используя этот css (при условии, что у вас есть сброс, чтобы очистить поля, paddings и стиль списка ul/li). Устанавливая отображение в строку и не устанавливая ширину, каждый li будет центрироваться по ul text-align: center и должен располагаться относительно равномерно из-за правильного поля.

#news-grid 
{ 
    overflow: hidden; 
    text-align: center; 
    width: 100%; 
    /* whatever other specific styles you want */ 
} 

#news-grid li 
{ 
    display: inline; 
    margin-right: 2%; 
    /* whatever other specific styles you want */ 
} 

Answer 2

Я не эксперт, когда речь идет о HTML и CSS, но я думаю, вы могли бы начать проверьте эти пункты:

1. Есть ли какой-либо лист ResetCss под названием перед кодом?
2. Что должно отображаться окно с изображением ?
3. Вы пробовали «margin: auto;» в определение класса «li»?