web-dev-qa-db-fra.com

Image dynamique centrale horizontale en div avec position absolue

J'ai cherché partout sur le Web cette réponse, mais il me semble que pour centrer horizontalement une image en div avec une position absolue, j'ai besoin de connaître les dimensions de l'image, mais c'est dynamique. 

Voici mon html:

<header>
<div id="elogo">
    <img src="http://www.ftiweb.com/images/eStore/eStore_wht50.png">
</div>
<div id="nav">TOUR | MENU</div>
</header>
<div id="content">
<img class="ipad" src="http://ftiweb.com/images/eStore/Ipad_hand.png">
</div>
<footer>
<div id="foot">&#169; FTIeStore 2013 &bull; Privacy Policy</div>
</footer>

et voici le .css que j'utilise:

#content {
width: 70%;
height: 80%;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -35%;
display: table-cell;

img.ipad {
max-width: 100%;
max-height: 100%;
position: absolute;
bottom: 0px;
display: block;
}

L'objectif est simplement que l'image reste en bas/au centre de la page et redimensionnée pour s'adapter à la fenêtre du navigateur. Si je complique excessivement les choses, n'hésitez pas à suggérer une alternative.

Voici un lien vers un js.fiddle:

img centré en bas - js.fiddle

cssimagedynamiccenter
12
Ben Cohn

Si vous voulez que la position soit absolue, procédez comme suit:

http://jsbin.com/aveped/1/edit

img {
  width:20%;
  display:block;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
}

Le parent doit avoir une position relative, ou il sera positionné contre le corps . Vous n'avez pas besoin de largeur pour cela, je viens d'inclure la largeur parce que mon image est si grande.

61
user1721135

left = center position - la moitié de la largeur de l'image

img {
   position: absolute;
   bottom: 0;
   left: 50%; /*half the container width*/
   margin-left: -250px; /*half the width of the image*/
}
0
Grant