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

Posted

技术标签:

【中文标题】具有绝对位置的div中的水平中心动态图像【英文标题】:Horizontal center dynamic image in div with absolute position 【发布时间】:2013-07-11 12:55:03 【问题描述】:

我已经在整个网络上寻找这个答案,但在我看来,为了在 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 的链接:

bottom-centered img - js.fiddle

【问题讨论】:

【参考方案1】:

left = 中心位置 - 图片宽度的一半

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

【讨论】:

【参考方案2】:

如果您希望它是绝对位置,请这样做:

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

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

父级需要有相对位置,否则它会靠着身体定位。 你不需要宽度,我只包括宽度,因为我的图像太大了。

【讨论】:

感谢您的帮助。这就是我所需要的。 这是正确的解决方案。谢谢我不知道 left:0 和 right: 0 和 margin-left: auto 和 margin-right: auto !!! 我知道已经晚了 2 年。但是这个答案应该被接受@Ben Cohn 我不确定这是故意遗漏还是意外,但我还需要添加 top: 0; 以使图像垂直和水平居中。 我没有包括它,因为问题只是关于水平居中。

以上是关于具有绝对位置的div中的水平中心动态图像的主要内容,如果未能解决你的问题,请参考以下文章

在具有动态高度的div中垂直居中图像[重复]

以位置为中心的项目:相对

一组 div 的动态 div 高度

带有滚动的 Div 和带有绝对位置的内容

html 具有动态高度的中心DIV

CSS 具有动态高度的中心DIV