CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Tomek Buszewski
Tomek Buszewski

Reputation: 7955

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

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.

Upvotes: 1

Views: 1459

Answers (3)

Marc Audet
Marc Audet

Reputation: 46825

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.

Upvotes: 3

jason
jason

Reputation: 3615

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;
}

Upvotes: 0

Niels Keurentjes
Niels Keurentjes

Reputation: 41968

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.

Upvotes: 0

Related Questions