如何将图像与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底部对齐（在引导程序中）？

回答

相关问题