Как вы вертикально выравниваете изображения внутри списка или div?

У меня есть следующий код для показа некоторых изображений:

HTML:

<div class="footer-logos">
        <ul>
            <li><img src="/sites/default/files/imagefield_thumbs/All Ears Cambodia Logo_1.png" alt="" class="first"></li>
            <li><img src="/sites/default/files/imagefield_thumbs/MLF rev.jpg" alt="" class=""></li>
            <li><img src="/sites/default/files/imagefield_thumbs/TAMTF A.jpg" alt="" class=""></li>
            <li><img src="/sites/default/files/imagefield_thumbs/unltd-logo.png" alt="" class=""></li>
            <li><img src="/sites/default/files/imagefield_thumbs/CECILYS HIGH RES.jpg" alt="" class=""></li>
            <li><img src="/sites/default/files/imagefield_thumbs/Street Child Africa.jpg" alt="" class="last"></li>     
        </ul>
</div>

CSS

.footer-logos {text-align:center;}
.footer-logos img {margin-left:20px;margin-right:20px;}
.footer-logos img.first {}
.footer-logos img.last {}
.footer-logos ul {}
.footer-logos ul li {display: inline; list-style:none;}

Это создает изображения, которые выглядят так:

alt text http://labs.dante-studios.com/footer-logos-normal.jpg

Но я бы хотел, чтобы он центрировал логос вертикально, чтобы он выглядел так:

alt text http://labs.dante-studios.com/footer-logos-fixed.jpg

Я пробовал вертикально выравнивать все через CSS, но это действительно не работает, если я не использую таблицу. Так или иначе, я могу получить желаемый эффект, не используя строку таблицы?

ОБНОВЛЕНИЕ 1

Изображения, которые создаются, могут иметь разную высоту, поэтому нельзя использовать элемент с фиксированной высотой css...

Ответ 1

У изображений есть фиксированная верхняя граница относительно их высоты?

Если это так, вы можете установить line-height содержащего div на эту высоту, а затем установить свойство vertical-align тегов img на middle.

Смотрите здесь: http://phrogz.net/CSS/vertical-align/index.html

Ответ 2

ul.seznam {margin: 0px; padding: 15px 0px 15px 15px; list-style: none;}
li.bod {color: #502945; font: normal 13px/21x Tahoma; 
margin: 0px 0px 0px 70px; padding: 0px 0px 2px 25px; 
background: url(components/bod_odrazka.png) left no-repeat;}

Ответ 3

Добавьте vertical-align: middle; в .footer-logos img:

.footer-logos img {margin-left:20px;margin-right:20px;vertical-align:middle;}

Тем не менее, вы должны установить фиксированные width и height в каждом из элементов <img>, чтобы избежать того, что все это вскочит во время загрузки страницы.