我已经在整个网络上寻找这个答案,但在我看来,为了在绝对位置的 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">© FTIeStore 2013 • 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 的链接:
最佳答案
如果你想让它成为绝对位置,那么这样做:
http://jsbin.com/aveped/1/edit
img {
width:20%;
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
margin:auto;
}
父级需要有相对位置,否则它将靠着主体定位。 你不需要为此设置宽度,我只是包含了宽度,因为我的图片太大了。
关于css - 具有绝对位置的div中的水平居中动态图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17624097/