Центрирование абсолютного изображения с использованием%

Question

У меня проблемы с использованием процентов для горизонтального центрирования абсолютно позиционированного изображения.Это для жидкого сайта, и поэтому мне нужно, чтобы изображение erasers.png было центрировано на заднем плане.Мне нужно иметь возможность контролировать его размер в процентах, поэтому я не думаю, что смогу сделать его фоновым изображением.

Есть ли способ сделать это?Или есть лучший способ сделать то же самое?

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

Answer 1

Абсолютно поместите обертку для изображения (вместо изображения), примените text-align: center к обертке и установите его свойства left и right равными 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;
}