html - リストから作成された画像のグリッドの中央と中央を揃える

Question

画像が縦向きか横向きかによって、高さ 70px または幅 70px の 9 枚の写真を含む ul リストがあります。画像を 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>