wake-up-neo.com

Dynamisches Bild in horizontaler Mitte in div mit absoluter Position

Ich habe im Internet nach dieser Antwort gesucht, aber um ein Bild horizontal mit absoluter Position horizontal zu zentrieren, muss ich die Abmessungen des Bildes kennen, 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, die 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, dass das Bild unten und in der Mitte der Seite bleibt und die Größe entsprechend an das Browserfenster angepasst wird. Wenn dies zu kompliziert ist, können Sie mir gerne eine Alternative vorschlagen.

Hier ist ein Link zu einem js.fiddle:

unten zentriert img - js.fiddle

12
Ben Cohn

Wenn Sie möchten, dass es sich um eine absolute Position handelt, machen Sie es so:

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

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

Das übergeordnete Element muss eine relative Position haben, oder es wird gegen den Körper positioniert. Sie benötigen dafür keine Breite. Ich habe nur die Breite eingefügt, weil mein Bild so groß ist.

61
user1721135

links = Mittelposition - halbe Bildbreite

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