使用 % 将绝对图像居中答案

【问题标题】：Centering an Absolute Image using %使用 % 将绝对图像居中
【发布时间】：2012-02-25 20:40:48
【问题描述】：

我在使用百分比将绝对定位的图像水平居中时遇到了一些问题。它适用于一个流动的网站，所以我需要将 erasers.png 图像放在背景中。我需要能够以百分比控制它的大小，所以我认为我不能将其设为背景图像。

有没有办法做到这一点？还是有更好的方法来完成同样的事情？

【问题讨论】：

【解决方案1】：

绝对定位图像的包装器（而不是图像），将 text-align:center 应用于包装器，并将其左右属性设置为 0px。包装器将与标题相同，但会从流程中取出，而图像可以继续充当内联元素，因此居中有效，但将与包装器的上下文隔离。

HTML：

<span id="erasersWrapper">
    <img id="toperasers" src="http://dl.dropbox.com/u/14080718/Final/images/erasers.png" alt="Erasers">
</span>

CSS：

#erasersWrapper{
    position:absolute;
    left:0px;
    right:0px;
    text-align:center;
}

【讨论】：

我试过了，但有些东西不能正常工作。 jsfiddle.net/vzPUw/7 有什么想法吗？
尝试将左右属性设置为-10000px。您还需要将图形的高度指定为其容器的百分比。不确定您确切想要的视觉效果，但我相信这个小提琴包含了这些原则：jsfiddle.net/vzPUw/8 ... 注意：它在每个浏览器中看起来都不同——所以它需要更多的工作——但是维护的效果缩放时图像比例之间的关系。
这是一个很好的开始。谢谢您的帮助。它似乎在 Chrome 中工作。