My goal is to neatly align a group of images at the bottom of a fixed-height div. The images all have the same height and width, making the alignment easier.
Here is the current structure of my code:
<div id="randomContainer">
<div id="imageContainer">
<img src="1.png" alt=""/>
<img src="2.png" alt=""/>
<img src="3.png" alt=""/>
<img src="4.png" alt=""/>
</div>
<div id="navigationContainer">
<!-- navigation stuff -->
</div>
</div>
In my CSS, I have set the following:
div#imageContainer {
height: 160px;
vertical-align: bottom;
display: table-cell;
}
So far, I have successfully aligned the images at the bottom using display: table-cell along with vertical-align: bottom.
However, I am wondering if there is a more efficient way to accomplish this without using display: table-cell. Any suggestions for cleaner code?