<ul> <li> aligning issue, different sized images

I have ul with following structure

<div class="g开发者_开发问答al">
<ul>
        <li>
            <a rel="lightbox[imgs]" href="http://192.168.0.204/CAPW/uploads/materials_pics/5fdc91f1f2e9471ca375d346d3558757.jpg">
                <img width="100" height="100" class="imgclass" src="http://192.168.0.204/CAPW/uploads/materials_pics/5fdc91f1f2e9471ca375d346d3558757_thumb.jpg">
            </a>    
        </li>
        <li>
            <a rel="lightbox[imgs]" href="http://192.168.0.204/CAPW/uploads/materials_pics/d3a43711dee8a4331f14329d40ed6314.jpg">
                <img width="100" height="100" class="imgclass" src="http://192.168.0.204/CAPW/uploads/materials_pics/d3a43711dee8a4331f14329d40ed6314_thumb.jpg">
            </a>    
        </li>
        <li>
            <a rel="lightbox[imgs]" href="http://192.168.0.204/CAPW/uploads/materials_pics/836bdef9b8ec56c0a88386760efb1f90.png">
                <img width="100" height="100" class="imgclass" src="http://192.168.0.204/CAPW/uploads/materials_pics/836bdef9b8ec56c0a88386760efb1f90_thumb.png">
            </a>    
        </li>

        </ul>

because I have different image thumb sizes I can't set width and height to <li> . Please refer to the screen-shot. It is not aligned properly

The CSS used

<style type="text/css">
    .gal ul li {
        padding: 5px;
        margin: 5px;
        position: relative; 
        float: left;
        list-style:none;
    }

    .imgclass {
        float: left;
        margin: 0 0 15px 0;
        padding: 2px;
        vertical-align:middle;
    }
    .gal {
        margin:0 auto;
        width: 850px;
        text-align:center;
    }

    </style>

My problem is how avoid that overlapping the small-size images

instead of floating the li elements, have them display: inline; then to counteract the "whitespace in HTML" link trailing you can have the <a> display:inline-block and then you will be able to set that vertical-align: middle

Example Fiddle:

CSS:

.gal ul li {
    padding: 5px;
    margin: 5px;
    position: relative; 
    display: inline; /* changed from float */
    list-style:none;
}

.gal ul li a {display: inline-block; vertical-align: middle;} /* added */

.imgclass { /* no need to float these **/
    margin: 0 0 15px 0;
    padding: 2px;
    border: 0;
}
.gal {
    margin:0 auto;
    width: 850px;
    text-align:center;
}

You can use "display: inline-block". Not sure if it will work in all browser, there is problem in older firefox ( http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/). Example: http://jsfiddle.net/fs9RU/