0

我有一个 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>
4

0 回答 0