title: How to make the responsible image align center in mobile site?
body: <p>I've got 4 images for the wap site.
  When in small screen, I want it will be two lines,two images per line.
  If in big screen that like ipad,then it will become 4 images one line.
  And is also align center in the page, how can it be?</p>
  
  <p>it's my html part here:</p>
  
  <pre><code>&lt;div class="fo3"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;img src="img/pic1.jpg" width="100%" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="img/pic2.jpg" width="100%" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="img/pic3.jpg" width="100%" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="img/pic4.jpg" width="100%" /&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this is css part:</p>
  
  <pre><code>.fo3{
      padding:0 10%;
      max-width:80%;
  }
  
  .fo3 ul{
      position:absolute;
      left:50%;
  }
  
  .fo3 ul li{
      float:left;
      width:50%;
      max-width:268px;
      display:inline;
  }
  
  .fo3 ul li img{
      display:block;
  }
  </code></pre>