web-dev-qa-db-fra.com

Alignement inférieur de l'image HTML dans le conteneur DIV

J'ai une balise div avec une hauteur fixe. La plupart des images ont la même hauteur et la même largeur.

Je veux aligner les images au bas de la div pour qu'elles soient bien arrangées. Voici ce que j'ai jusqu'à présent:

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

Le CSS ressemble à:

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

J'ai réussi à aligner les images du bas avec display: table-cell et le vertical-align: bottom attributs css.

Existe-t-il un moyen plus simple d’afficher la div sous forme de tableau et d’aligner les images au bas de la balise DIV?

htmlcssimagealignmentspacing
38
Patric

Ceci est votre code: http://jsfiddle.net/WSFnX/

En utilisant display: table-cell est correct, à condition que vous sachiez que cela ne fonctionnera pas dans IE6/7. Sinon, c'est sûr: Y a-t-il un inconvénient à utiliser `display: table-cell`on divs?

Pour corriger l'espace en bas, ajoutez vertical-align: bottom au imgs actuel:

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

Supprimer l’espace entre les images revient à ceci: alternative à la propriété CSS3?

Alors, voici une démo avec les espaces blancs supprimés dans votre code HTML: http://jsfiddle.net/WSFnX/4/

46
thirtydot

Définissez la div parent comme position:relative et l'élément interne à position:absolute; bottom:0

55
sekmo

Les Flexbox peuvent accomplir cela en utilisant align-items: flex-end; flex-direction: column; avec display: flex; ou display: inline-flex;

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

CSS-Tricks a un bon guide pour les flexboxes

12
Daniel

<div> avec quelques proportions

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

<img> avec leurs propres 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 */
}
6
comonitos