如何將圖像與div底部對齊（在引導程序中）？

我希望能夠將不同大小的圖像對齊到底部。如何將圖像與div底部對齊（在引導程序中）？

我有以下標記：

<div class="container"> 
    <div class="container"> 
    <div class="footer-images"> 
     <a href="link1"><img src="img1"></a> 
     <a href="link2"><img src="img2"></a> 
     <a href="link3"><img src="img3"></a> 
    </div> 
    </div> 
    <div class="container"> 
    <div class="copyright"> 
     <p>© Some Company YYYY</p> 
    </div> 
    </div> 
</div>

我無法弄清楚如何有對齊到頁腳圖像DIV底部的所有圖像。任何幫助將不勝感激。

來源

2013-03-22 Sheldon

試試這個

.footer-images img{ 
     vertical-align:bottom; 
     border:0; 
     }

來源

2013-03-22 11:37:11 Prashobh

完美。我認爲這是行不通的，因爲我不包括邊界：0; – Sheldon 2013-03-22 11:52:01

使用這個CSS和應用

.footer-images img{ 
width:xxpx; 
height:xxpx;   // add here your style as like with height border etc. 
vertical-aling:top; 
border:0; 
}

更多bootstrap

來源

2013-03-22 11:11:26

這幾乎是我一直在尋找，但沒有爲不同尺寸的圖像工作。看到我標記爲正確的答案。感謝您的回答。 – Sheldon 2013-03-22 11:52:47

難道你可能輸入'aling'而不是'align'嗎？ – 2015-04-20 20:43:47

這是否幫助？

<style type="text/css"> 
.footer-images { 
    margin: auto; 
    display: block; 
    position: absolute; 
    bottom: 0; 
} 
.footer-images .copyright { 
    text-align: center; 
} 
</style>

使用這個HTML

<div class="container"> 
    <div class="container"> 
    <div class="footer-images"> 
     <a href="link1"><img src="http://placehold.it/350x150"></a> 
     <a href="link2"><img src="http://placehold.it/640x480"></a> 
     <a href="link3"><img src="http://placehold.it/120x120"></a> 
     <div class="container"> 
     <div class="copyright"> 
      <p>© Some Company YYYY</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

來源

2013-03-22 11:24:47 Kane

如何將圖像與div底部對齊（在引導程序中）？

回答

相關問題