水平中心动态图像在div与绝对位置 [英] Horizontal center dynamic image in div with absolute position
问题描述
我已经看过这个答案,但在我看来,为了将图像水平地置于div的绝对位置,我需要知道图像的尺寸,但它是动态的。
I have looked all over the web for this answer but it seems to me that in order to horizontally center an image in div with absolute position, I need to know the dimensions of the image, but it's dynamic.
这是我的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">© FTIeStore 2013 • Privacy Policy</div>
</footer>
这里是我使用的.css:
and here is the .css I'm using:
#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;
}
目标只是让图像保持在底部/中心页面并重新调整大小以适应浏览器窗口。如果我过度复杂,请随意提出一个替代方案。
The goal is just to have the image stay at the bottom/center of the page and re-size to fit the browser window. If I'm over-complicating this, please feel free to suggest an alternative.
这是一个js.fiddle的链接:
Here is a link to a js.fiddle:
推荐答案
如果你想要这样做是绝对的位置:
If you want it to be absolute position do it like this:
http://jsbin.com/aveped/1/edit
img {
width:20%;
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
margin:auto;
}
父母需要具有相对位置,或者它将针对身体。
你不需要宽度,我只是包括宽度,因为我的图像是如此之大。
The parent needs to have position relative, or it will be positioned against the body. You dont need width for this, I just included width because my image is so big.
这篇关于水平中心动态图像在div与绝对位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!