title: center an image in a div?? CSS confusion
body: <p>Not sure why the images won't center: </p>
  
  <p><a href="http://jsfiddle.net/xtian/BEXDG/" rel="nofollow">http://jsfiddle.net/xtian/BEXDG/</a></p>
  
  <pre><code>&lt;div class="topic-tracker-info"&gt;
          &lt;div class="container"&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;div class="container-topic"&gt;
                              &lt;img src="http://demo.omnigon.com/christian_bovine/snmobile/img/topic-1.jpg" alt=""&gt;
                              &lt;p&gt;2011 NFL DRAFT&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="mid"&gt;
                      &lt;a href="#"&gt;
                          &lt;img src="http://demo.omnigon.com/christian_bovine/snmobile/img/topic-2.jpg" alt=""&gt;
                          &lt;p&gt;NFL Labor Dispute&lt;/p&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;img src="http://demo.omnigon.com/christian_bovine/snmobile/img/topic-3.jpg" alt=""&gt;
                          &lt;p&gt;NHL TRADE DEADLINE&lt;/p&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class="trend-nav"&gt;
                  &lt;a class="prev" href="#"&gt;PREVIOUS&lt;/a&gt;
                  &lt;a href="#" class="pages"&gt;&lt;b&gt;LATEST&lt;/b&gt;&lt;/a&gt;
                  &lt;a href="#" class="next"&gt;NEXT&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  .container{margin: 0 auto;width:90%;padding:0;overflow: hidden;}
  .container-center{margin: 0 auto;width:299px;padding:0;overflow: hidden;}
  .container-topic{width:100%; margin:0 auto;}
  .topic-tracker {float:left; width:100%; border-top:4px solid #000;background-color: #a80500;}
  .topic-tracker.nfl{background-color:#005496;}
  .topic-tracker.mlb{background-color:#cc9866;}
  .topic-tracker h2{background:transparent url(img/sn-logo.png) no-repeat 0 5px; font-size:12px; color:#fff; font-style: italic;padding: 3px 0 3px 16px; margin-bottom:1px;}
  .topic-tracker-info{float:left;width:100%;height:140px;background:transparent url(img/topic-bg.gif) repeat-x 0 0; }
  .topic-tracker-info ul{float:left;width:100%;padding:5px 0 0 0;}
  .topic-tracker-info ul li{float:left;width:30%;text-align:center;margin: 0 auto;}
  .topic-tracker-info ul li a{font-size:12px; font-weight: bold; color:#000;line-height: 1.1;margin:0 auto;}
  .topic-tracker-info ul li.mid{margin:0 8px;}
  .topic-tracker-info ul li img{float:left;width:93px;margin:0 0 2px 0;clear:right;margin: 0 auto;}
  .topic-tracker-info ul li p{clear:both;}
  
  .trend-nav{float:left;margin-top:10px;width:100%;}
  .trend-nav a{float:left; color:#4e4e4e; font-size: 11px; font-weight: bold;}
  .trend-nav a.prev{width:40%;float:left;text-align: left;padding-left:13px;background: transparent url(img/arrow-prev.png) no-repeat 0 1px;}
  .trend-nav a.next{width:18%;float:right;text-align: right;padding-right:13px;background: transparent url(img/arrow-next.png) no-repeat right 1px;}
  .trend-nav p.pages, #wrapper .trend-nav a.pages{float:left;width:20%;height:16px;margin:0 auto;padding-top:2px;background:transparent url(img/pages_bg.png) no-repeat center center; text-align:center;font-size:10px; color:#000;font-weight: normal;}
  </code></pre>