Horizontales Zentrum dynamisches Bild in div mit absoluter Position

Question

Ich habe im Web nach dieser Antwort gesucht, aber es scheint mir, dass, um ein Bild horizontal in div mit absoluter Position zu zentrieren, ich die Abmessungen des Bildes kennen muss aber es ist dynamisch.

Hier ist mein 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> 

und hier ist die CSS- Ich verwende:

#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; 
} 

Das Ziel ist nur das Bild Aufenthalt am Boden/Mitte des haben Seite und passen Sie sie an das Browserfenster an. Wenn ich dies übermäßig verkompliziere, kann ich Ihnen gerne eine Alternative vorschlagen.

Hier ist ein Link zu einem js.fiddle:

bottom-centered img - js.fiddle

Answer 1

Wenn Sie wollen, dass es absolute Position sein, tun es wie folgt aus:

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

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

Die Mutter muss relative Position haben, oder es wird gegen den Körper positioniert werden. Sie brauchen keine Breite dafür, ich habe nur Breite, weil mein Bild so groß ist.

Answer 2

links = Mittelstellung - die Hälfte der Breite des Bildes

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