<ul> <li>вопрос выравнивания, изображения разных размеров

Question

У меня ul со следующей структурой

<div class="gal">
<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>

, потому что у меня разные размеры большого пальца изображения, я не могу установить ширину и высоту <li>Пожалуйста, обратитесь к скриншоту.Он не выровнен должным образом

Используемый CSS

<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>

Моя проблема в том, как избежать наложения изображений малого размера

Answer 1

вместо плавающих элементов li, используйте их display: inline;, затем, чтобы противодействовать трейлингу ссылки "пробел в HTML", вы можете иметь <a> display:inline-block, а затем вы сможете установить это vertical-align: middle

Пример 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;
}

Answer 2

Вы можете использовать «display: inline-block». Не уверен, что он будет работать во всех браузерах, проблема в старом Firefox (http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/). Пример: http://jsfiddle.net/fs9RU/