0

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;
}
Corey
  • 2,453
  • 4
  • 35
  • 63
  • 1
    Possible duplicate of [css vertically align floating divs](http://stackoverflow.com/questions/9430929/css-vertically-align-floating-divs) – Corey Oct 29 '15 at 23:14

1 Answers1

0

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>
j08691
  • 204,283
  • 31
  • 260
  • 272
  • I need it to happen in floated elements as the title states, I'm aware of the inline-block method. – Corey Oct 29 '15 at 22:35
  • Floated elements don't obey vertical-align. At least not without some hacky workarounds. – j08691 Oct 29 '15 at 22:58
  • How hacky are these workarounds? I'm currently fiddling with trying to absolutely position the images within the div to the bottom. – Corey Oct 29 '15 at 23:05