在浮动元素中垂直对齐图像

Question

I'm trying to vertical align some images to the bottom in floated elements, and I can't seem to get it to cooperate.

Here is a JSFiddle with an example. You can see they are aligning to the top.

http://jsfiddle.net/decr9gfj/1/

Some Code:

<ul class="clearfix">
    <li><a href="#"><img src="http://fpoimg.com/100x150"></a></li>
    <li><a href="#"><img src="http://fpoimg.com/100x100"></a></li>
    <li><a href="#"><img src="http://fpoimg.com/100x75"></a></li>
</ul>

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    background:#eee;
    display: block;
    vertical-align:bottom;
}

li {
    float:left;
    padding:0px 5px;
}

a {
    display:block;
}

img {
    display:block;
    vertical-align:bottom;
}

Answer 1

Remove the float on the list items and add display:inline-block.

li {
    display:inline-block;
    padding:0px 5px;
}

jsFiddle example

 ul { list-style-type:none; margin:0; padding:0; background:#eee; display: block; vertical-align:bottom; } li { display:inline-block; padding:0px 5px; } a { display:block; } img { display:block; vertical-align:bottom; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content:" "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \\*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ 

 <ul class="clearfix"> <li><a href="#"><img src="http://fpoimg.com/100x150"></a> </li> <li><a href="#"><img src="http://fpoimg.com/100x100"></a> </li> <li><a href="#"><img src="http://fpoimg.com/100x75"></a> </li> </ul>