具有绝对位置的div中的水平中心动态图像

Question

我在网上看到了这个答案,但在我看来,为了将图像水平居中于具有绝对位置的div,我需要知道图像的尺寸,但它是动态的.

这是我的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>

这是我正在使用的.css:

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

目标只是让图像保持在页面的底部/中心并重新调整大小以适应浏览器窗口.如果我过于复杂,请随意提出替代方案.

这是一个js.fiddle的链接:

以底部为中心的img - js.fiddle

Answer 1

如果你想让它成为绝对位置,那就这样:

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

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

父母需要有相对位置,或者它将被定位在身体上.你不需要宽度,我只是包括宽度,因为我的图像是如此之大.