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

Question

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

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

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

альтернативный текст http://labs.dante -studios.com / footer-logos-normal.jpg

Но я бы хотел, чтобы логотипы располагались по центру по вертикали, чтобы он выглядел следующим образом:

альтернативный текст http://labs.dante -studios.com / footer-logos-fixed.jpg

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

ОБНОВЛЕНИЕ 1

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

Answer 1

Имеют ли изображения фиксированную верхнюю границу их высоты?

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

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

Answer 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;}

Answer 3

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

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

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