Positionner une div près du côté inférieur d’une autre div

J’ai div externe et div interne. Je dois placer la div interne au bas de la partie externe.

La div externe est élastique (largeur: 70% par exemple). Je dois aussi centrer le bloc intérieur.

Le modèle simple de maquillage décrit est montré sur l’image ci-dessous:

entrer la description de l'image ici

Testé et fonctionnant sur Firefox 3, Chrome 1 et IE 6, 7 et 8:

  
Outer
Inner

Version en direct ici: http://jsfiddle.net/RichieHindle/CresX/

Vous avez besoin d’un div wrapping pour le bas afin de le centrer.

  

Fonctionne bien sur tous les navigateurs, y compris ie6.

  

CSS3 Flexbox permet le positionnement du fond très facilement. Vérifiez le tableau de support Flexbox

HTML

 

CSS

 .outer { display: flex; justify-content: center; /* Center content inside */ } .inner { align-self: flex-end; /* At the bottom of the parent */ } 

Sortie:

 .outer { background: #F2F2CD; display: flex; width: 70%; height: 200px; border: 2px solid #C2C2C3; justify-content: center; } .inner { background: #FF0081; width: 75px; height: 50px; border: 2px solid #810000; align-self: flex-end; }