Html 如何使移动站点中负责的图像对齐中心？

我有4张wap网站的图片。 当在小屏幕上，我希望它将是两行，每行两个图像。 如果在大屏幕上像ipad一样，那么它将变成4张图片一行。 而且在页面中也是居中对齐的，怎么可能呢

这里是我的html部分：

<div class="fo3">
    <ul>
        <li><img src="img/pic1.jpg" width="100%" /></li>
        <li><img src="img/pic2.jpg" width="100%" /></li>
        <li><img src="img/pic3.jpg" width="100%" /></li>
        <li><img src="img/pic4.jpg" width="100%" /></li>
    </ul>
    <div class="clear"></div>
</div>

---

也许你想退房？它们允许您根据用户屏幕的大小定义不同的css样式。

也许我弄错了，它是一个手机可以浏览的网站，而不是wap。。。

.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;
}