HTML image bottom alignment inside DIV container

Question

I have a div tag with a fixed height   Most of the images have the same height and width   I want to align the images at the bottom of the div so that they are nicely arranged   Here is what I have so far    lt div id  randomContainer  gt       lt div id  imageContainer  gt           lt img src  1 png  alt     gt           lt img src  2 png  alt     gt           lt img src  3 png  alt     gt           lt img src  4 png  alt     gt       lt  div gt       lt div id  navigationContainer  gt           lt  -- navigation stuff -- gt       lt  div gt   lt  div gt    The CSS looks like   div imageContainer       height  160px        vertical-align  bottom      display  table-cell      I managed to align the images at the bottom with display  table-cell and the vertical-align  bottom css attributes     Is there a cleaner way as displaying the div as table-cell and aligning the images at the bottom of the DIV tag

User · Accepted Answer

This is your code  http   jsfiddle net WSFnX   Using display  table-cell is fine  provided that you re aware that it won t work in IE6 7  Other than that  it s safe  Is there a disadvantage of using  display table-cell on divs   To fix the space at the bottom  add vertical-align  bottom to the actual imgs   http   jsfiddle net WSFnX 1   Removing the space between the images boils down to this  bikeshedding CSS3 property alternative   So  here s a demo with the whitespace removed in your HTML  http   jsfiddle net WSFnX 4

User · Answer

lt div gt  with some proportions  div     position  relative    width  100     height  100        lt img gt  s with their own proportions  img     position  absolute    top  0    left  0    bottom  0    right  0    width  auto     to keep proportions      height  auto     to keep proportions      max-width  100      not to stand out from div      max-height  100      not to stand out from div      margin  auto auto 0     position to bottom and center

User · Answer

Set the parent div as position relative and the inner element to position absolute  bottom 0

User · Answer

Flexboxes can accomplish this by using align-items  flex-end  with display  flex  or display  inline-flex  div imageContainer       height  160px        align-items  flex-end      display  flex          This is the default value  so you only need to explicitly set it if it s already being set to something else elsewhere           flex-direction  row       JSFiddle example CSS-Tricks has a good guide for flexboxes

[html] HTML image bottom alignment inside DIV container

Examples related to html

Examples related to css

Examples related to image

Examples related to alignment

Examples related to spacing