Выровнять баннер до центра

Question

У меня проблема с выравниванием баннера.
Это не должно быть фоновое изображение, оно может быть объектом или встраивать, и оно должно быть 100% страницы, но при уменьшении ширины страницы оно должно оставаться видимым центральной частью баннера.

Answer 1

Добавить width:100% в .promo_top img?

http://jsfiddle.net/3Ydph/

Редактировать

Если вам не нравится, изменение размера изображения, быстрый и простой способ бы быть фоновое изображение, которое достаточно широк:

.promo_top{ 
    float:left; 
    width:100%; height:300px; text-align:center; overflow:hidden; 
    background-image:url(http://www.quoteserv.com/funny/images/bowie.gif); 
    background-position:top center; 
    background-repeat:no-repeat; 
} 

края будут исчезать влево и вправо, если экран слишком мал для баннера, но остаются централизованными. Новый jsfiddle (только представьте себе ПИК очень широк, чтобы соответствовать большинству экранов)

http://jsfiddle.net/3Ydph/1/

Answer 2

CSS

.width_100 {width: 100%;} 
.center {margin-left: auto; margin-right: auto; text-align: center;} 

XHTML

<div class="width_100"> 
<img alt="Alternative Text" class="center" src="lulz.png" /> 
</div> 

Answer 3

Working Fiddle for both examples

Я не вижу причин, почему бы не использовать фоновое изображение. (и если вы сожалеете об этом ограничении, то вот рабочая скрипка выше)

Если вам нужно использовать изображение, вы можете достичь этого с помощью простой функции JQuery посмотреть на рабочую скрипку выше.

var img = $("#bannerWithScript > img"); //or any selector you want for targeting your image 

img.css({ 
    "top": "calc(50% - " + (img.height()/2) + "px)", 
    "left": "calc(50% - " + (img.width()/2) + "px)" 
});