将中心和中间对齐从列表创建的图像网格

Question

我有一个ul列表，其中包含9张图片，高度为70像素或宽度为70像素，具体取决于图像是纵向还是横向拍摄。我已经将图像很容易地显示为3行和3列，但我似乎无法对齐图像，因此它们在水平和垂直方向都处于中心位置。

谢谢大家。

这是我的代码

CSS

#gallery_image ul {
    list-style:none;margin:0;
    padding:0;
}
#gallery_image li {
    display: block;
    height: 80px;
    Width:80px;
    line-height: 80px;
    float:left;
    padding:5px;
    text-align:center;
}
#gallery_image li img { 
    line-height:80px;
    vertical-align: middle; 
}​

HTML

<div id="gallery_image">
   <ul>
        <li>
            <a href="/flower1.jpg" class="fancybox" rel="gallery1"><img src="/flower1.jpg" alt="" /></a>
        </li>
        <li>
            <a href="/flower2.jpg" class="fancybox" rel="gallery1"><img src="/flower2.jpg" alt="" /></a>
        </li>
        <li>
            <a href="/flower3.jpg" class="fancybox" rel="gallery1"><img src="/flower3.jpg" alt="" /></a>
        </li>
        <li>
            <a href="/flower4.jpg" class="fancybox" rel="gallery1"><img src="/flower4.jpg" alt="" /></a>
        </li>
        <li>
            <a href="/flower5.jpg" class="fancybox" rel="gallery1"><img src="/flower5.jpg" alt="" /></a>
        </li>
        <li>
            <a href="/flower6.jpg" class="fancybox" rel="gallery1"><img src="/flower6.jpg" alt="" /></a>
        </li>
        <li>
            <a href="/flower7.jpg" class="fancybox" rel="gallery1"><img src="/flower7.jpg" alt="" /></a>
        </li>
        <li>
            <a href="/flower8.jpg" class="fancybox" rel="gallery1"><img src="/flower8.jpg" alt="" /></a>
        </li>
        <li>
            <a href="/flower9.jpg" class="fancybox" rel="gallery1"><img src="/flower9.jpg" alt="" /></a>
        </li>
    </ul>
</div>