Vertical-align doesn't work (with table-cell display)

Question

I have this code: http://jsfiddle.net/5qLDz/ inside which I want to have images vertically aligned to bottom of the container (with some padding from container itself). It doesn't work even with li having display: table-cell and both li and img having vertical-align:bottom set. What can it be?

Please stop posting solutions using position: absolute . As you can see in my code, I used text-align: center which is important there.

Answer 1

One simple fix is to set the line-height to be the same as the container height:

ul.thumbnails li {
    box-sizing: border-box;
    text-align: center;
    background: grey;
    padding-bottom: 22px;
    height: 222px;
    line-height: 222px;
    display: table-cell;
}
ul.thumbnails li img {
    border-radius: 5px;
    bottom: 22px;
    vertical-align: bottom;
}

That seems to work, http://jsfiddle.net/audetwebdesign/5qLDz/20/

You only need to declare vertical-align: bottom on the img rule.

However, if you add other elements like captions or social media links this could affect how you implement the solution.

Answer 2

For the love of god don't use display:table-cell just to vertically align something. Just using relative positioning will also do this far more easily: forked Fiddle .

Only changed the parent to position:relative and the child to position:absolute .

Answer 3

Update your CSS:

div.left section.box ul.thumbnails {
  margin: 0;
  padding: 0;
}
ul.thumbnails li {

  text-align: center;
  background: grey;
  height: 222px;
  position:relative;    
}
ul.thumbnails li img {
  border-radius: 5px;
  bottom: 22px;
  position:absolute;
}