How to center li items in quicksand jQuery plugin

Question

My problem is that in some screen resolutions the list items are not in the center of the div while the ul is centered. Does anyone know a solution?
Thanks!

<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(); 
             });
     });

.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

Hi,

I'm no expert when it comes to HTML and CSS but i guess you could begin to check those points :

1. Is there any ResetCss sheet called before your code ?
2. What is the browser that gives you this display ?
3. Have you tried "margin: auto;" in the "li" class definition ?

Answer 2

You can do this pretty easily by using this css (assuming you have a reset to clear the margins, paddings and list-style of the ul/li). By setting display to inline and not setting a width, each li will be centered by the ul text-align: center and should space relatively evenly because of the right margin.

#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 */
}