Как вы вертикально выравниваете изображения внутри списка или 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>
, чтобы избежать того, что все это вскочит во время загрузки страницы.