una - mostrar imagen en html

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 anchura.

Quiero alinear las imágenes en la parte inferior de la división para que estén bien ordenadas. Esto 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 como:

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

Logré alinear las imágenes en la parte inferior con la display: table-cell y la vertical-align: bottom css.

¿Hay una forma 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

Establezca el div padre como position:relative y el elemento interno en position:absolute; bottom:0 position:absolute; bottom:0

Answer 2

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

Usar display: table-cell está bien, siempre que sepa que no funcionará en IE6 / 7. Aparte de eso, es seguro: ¿hay una desventaja de usar `display: table-cell`on divs?

Para arreglar el espacio en la parte inferior, agregue vertical-align: bottom a las img actuales:

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

Eliminar el espacio entre las imágenes se reduce a esto: ¿una alternativa de propiedad de CSS3 para la combinación de motocicletas?

Entonces, aquí hay una demostración con el espacio en blanco eliminado en su HTML: http://jsfiddle.net/WSFnX/4/

Answer 3

Flexboxes puede lograr esto mediante el uso align-items: flex-end; flex-direction: column; 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 tiene una buena guía para flexboxes

Answer 4

<div> con algunas proporciones

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

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