css - 使用 % 居中绝对图像

Question

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

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

http://jsfiddle.net/vzPUw/6/

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