![](/img/trans.png)
[英]How do you vertical align the div's within a container div vertically to the bottom?
[英]How do you vertically align images within a list or a 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元素......
圖像的高度是否有固定的上限?
如果是這樣,您可以將包含div的line-height
設置為該高度,然后將img
標記的vertical-align
屬性設置為middle
。
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;}
添加vertical-align: middle;
to .footer-logos img
:
.footer-logos img {margin-left:20px;margin-right:20px;vertical-align:middle;}
也就是說,您應該在每個<img>
元素中設置固定的width
和height
,以避免在頁面加載期間整個事物跳躍。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.