html - 将横幅居中对齐

Question

我在对齐横幅时遇到问题。
它不能是背景图像，它可以是一个对象或嵌入，它必须是页面的 100%，但当页面宽度减小时，它必须保持横幅的中心部分可见。

Answer 1

两个例子的工作小提琴

我看不出有什么理由不使用背景图片。（如果你对这个限制感到遗憾，那么这里是上面的工作小提琴）

如果你必须使用图像，你可以通过一个简单的 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)"
});

Answer 2

添加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 3

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>