html – 无论页面大小如何,都将标题图像居中

概述我的网页有一个标题图片,始终保留在窗口的顶部.当窗口最大化时,标题图像居中,但是当在小窗口(或智能手机浏览器)中查看时,标题设置在窗口的左侧,右侧裁剪.由于标题div比页面内容宽,因此当窗口小于标题而不是页面时,会出现水平滚动条. 我希望标题图像始终居中在页面上,如果窗口小于标题,则会裁剪左右两侧.如果窗口宽度小于页面宽度,则仅打开水平滚动条. 这张图片可能会更清楚地解释它： http://pos 我的网页有一个标题图片,始终保留在窗口的顶部.当窗口最大化时,标题图像居中,但是当在小窗口(或智能手机浏览器)中查看时,标题设置在窗口的左侧,右侧裁剪.由于标题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)

任何帮助将非常感激.

解决方法 您需要在头部元素上设置左：50％,其位置为：fixed,然后应用该元素宽度的一半的负边距以使其居中.

#header {  height: 100px;  wIDth: 998px;  position: fixed;  top: 0;  left: 50%;  margin-left: -499px;  background: url('../images/top.png') no-repeat;}

这是一个快速的小提琴：http://jsfiddle.net/blineberry/w8P2S/

你真的不需要这个包装器.

总结

以上是内存溢出为你收集整理的html – 无论页面大小如何,都将标题图像居中全部内容，希望文章能够帮你解决html – 无论页面大小如何,都将标题图像居中所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。