Poziomy, dynamiczny obraz w div z pozycją absolutną

Question

Szukałem w całej sieci dla tej odpowiedzi, ale wydaje mi się, że aby poziomo wyśrodkować obraz w div z pozycją absolutną, muszę znać wymiary obrazu , ale jest dynamiczny.

Tu jest mój 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> 

i tutaj jest .css Używam:

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

Celem jest po prostu mieć pobyt obraz na dole/centrum strona i zmień rozmiar, aby dopasować się do okna przeglądarki. Jeśli zbytnio to komplikuję, proszę zasugerować inną opcję.

Oto link do js.fiddle:

bottom-centered img - js.fiddle

Answer 1

Jeśli ma to być absolutna pozycja zrobić to tak:

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

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

Rodzic musi mieć względną pozycję, lub będzie pozycjonowany przeciwko ciału. Nie potrzebujesz do tego szerokości, właśnie dodałem szerokość, ponieważ mój obraz jest taki duży.

Answer 2

lewo = pozycję środkową - połowę szerokości obrazu

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