alineación inferior de la imagen HTML dentro del contenedor DIV

Question

Tengo una etiqueta div con una altura fija. La mayoría de las imágenes tienen la misma altura y ancho.

Quiero alinear las imágenes en la parte inferior del div para que estén bien organizadas. Aquí es lo que tengo hasta ahora:

<div id="randomContainer"> 
    <div id="imageContainer"> 
     <img src="1.png" alt=""/> 
     <img src="2.png" alt=""/> 
     <img src="3.png" alt=""/> 
     <img src="4.png" alt=""/> 
    </div> 
    <div id="navigationContainer"> 
     <!-- navigation stuff --> 
    </div> 
</div> 

El CSS se ve así:

div#imageContainer { 
    height: 160px; 
    vertical-align: bottom; 
    display: table-cell; 
} 

me las arreglé para alinear las imágenes en la parte inferior con display: table-cell y los atributos vertical-align: bottom css.

¿Existe alguna manera más clara de mostrar el div como celda de tabla y alinear las imágenes en la parte inferior de la etiqueta DIV?

Answer 1

Este es su código: http://jsfiddle.net/WSFnX/

Usando display: table-cell está bien, siempre y cuando usted es consciente de que no va a funcionar en IE6/7. Aparte de eso, es seguro: Is there a disadvantage of using `display:table-cell`on divs?

para fijar el espacio en la parte inferior, añadir vertical-align: bottom a los reales img s:

http://jsfiddle.net/WSFnX/1/

Extracción del espacio entre las imágenes se reduce a esto: bikeshedding CSS3 property alternative?

por lo tanto, aquí hay un demo con el espacio en blanco eliminado en el código HTML: http://jsfiddle.net/WSFnX/4/

Answer 2

Establecer el padre div como position:relative y el elemento interior para position:absolute; bottom:0

Answer 3

Flexboxes pueden lograr esto mediante el uso de align-items: flex-end; flex-direction: column; con display: flex; o display: inline-flex;

div#imageContainer { 
    height: 160px; 
    align-items: flex-end; 
    display: flex; 
    flex-direction: column; 
} 

CSS-Tricks has a good guide for flexboxes

Answer 4

< div> con algunas proporciones

div { 
    position relative 
    width: 100%; 
    height: 100%; 
} 

< img> 's con sus propias proporciones

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 */ 
}