使用％对齐绝对图像

Question

我在使用百分比水平居中绝对定位的图像时遇到了一些问题。这是一个流动的网站，所以我需要将erase.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;
}