不管页面大小如何,都使标题图像居中
||
我的网页的标题图像始终保留在窗口顶部。当窗口最大化时,标题图像居中,但是在小窗口(或智能手机浏览器)中查看时,标题设置在窗口的左侧,右侧被裁剪。因为标题div比页面内容宽,所以当窗口小于标题而不是页面时,水平滚动条就会出现。
我希望标题图像始终保持在页面的中心,如果窗口小于标题,则左右两侧都将被裁剪。同样,水平滚动条仅在窗口宽度小于页面宽度时才打开。
该图像可能会更清楚地解释它:
http://postimage.org/image/49ne3k3o/
到目前为止,我的代码:
CSS:
#headerwrap {
position: relative;
width: 998px;
height: 100px;
margin: 0 auto;
pointer-events: none;
}
#header{
position: fixed;
top: 0;
width: 998px;
margin: 0;
background: url(\'../images/top.png\') no-repeat;
height:100px;
z-index: 1;
pointer-events: none;
}
和HTML实施:
<div id=\"headerwrap\"\\>
<div id=\"header\">
</div>
</div>
(页面宽690px,标题宽998px)
任何帮助将非常感激。
没有找到相关结果
已邀请:
4 个回复
骚瓤
的标头元素上设置
,然后应用该元素宽度一半的负边距将其居中。
这是一个快速的小提琴:http://jsfiddle.net/blineberry/w8P2S/ 您实际上并不需要包装器。
瞥同忙接
必须在准备就绪的文档上首次调用此函数,然后在每次用户调整浏览器大小时都会调用此函数。
岭取
或者,如果您想在双方之间都留有空隙,可以执行以下操作:
所以,总而言之:
另外,将包装器更改为
,将内部div更改为
希望这可以帮助!
踩什不
我还更改了一些样式,以使所有内容都跨浏览器居中。为了避免显示水平滚动条,请将#headerwrap \的溢出属性设置为隐藏。 那应该解决您的两个问题。