不管页面大小如何,都使标题图像居中

|| 我的网页的标题图像始终保留在窗口顶部。当窗口最大化时,标题图像居中,但是在小窗口(或智能手机浏览器)中查看时,标题设置在窗口的左侧,右侧被裁剪。因为标题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) 任何帮助将非常感激。     
已邀请:
        您需要在具有
position: fixed
的标头元素上设置
left: 50%
,然后应用该元素宽度一半的负边距将其居中。
#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/ 您实际上并不需要包装器。     
        正如布伦特所说,您确实需要负的左边距,但是该边距将取决于用户的浏览器分辨率而变化,如果用户调整浏览器的大小,则可能会出现问题。 为了弄清楚利润,我使用了一个简单的jquery方法,每次都像超级按钮一样工作:
jQuery(window).resize(function() {
  var width = jQuery(document).width();
  var margin = (yourImageWidth-width)/-2;
  jQuery(\'.yourCssClassForYourHeader\').css(\'margin-left\', (margin)+\'px\');
});
必须在准备就绪的文档上首次调用此函数,然后在每次用户调整浏览器大小时都会调用此函数。     
        标头缩小以适合窗口大小是否可以接受? 另外,您是否需要将其作为纯HTML / CSS解决方案? 编辑: 这是我刚刚写的一个小脚本,它将两个div的大小调整为浏览器窗口的大小。它不需要任何库(如jQuery)。
<script type=\"text/javascript\">
var clientWidth = document.documentElement.clientWidth;

document.getElementById(\'headerwrap\').style.width = clientWidth + \"px\";
document.getElementById(\'header\').style.width = clientWidth + \"px\";
</script>
或者,如果您想在双方之间都留有空隙,可以执行以下操作:
var padding = 50;
document.getElementById(\'header\').style.width = (clientWidth - (padding * 2)) + \"px\";
document.getElementById(\'header\').style.left = padding + \"px\";
所以,总而言之:
<script type=\"text/javascript\">    
    var clientWidth = document.documentElement.clientWidth;
    document.getElementById(\'headerwrap\').style.width = clientWidth + \"px\";

    var padding = 50;
    document.getElementById(\'header\').style.width = (clientWidth - (padding * 2)) + \"px\";
    document.getElementById(\'header\').style.left = padding + \"px\";
</script>
另外,将包装器更改为
position: absolute; top: 0px
,将内部div更改为
position: absolute; top: 0px;
希望这可以帮助!
Also, you have a forward slash in your wrapper div that needs to go :)
    
        另一个选择是从#header div中删除background属性,然后将其放在#headerwrap中,如下所示:   编辑:      我添加了评论以帮助解释   CSS更改的影响。      编辑@布伦特的答案:      布伦特的答案也不错,但是   确实提出了一个问题   内容定位自己。   http://jsfiddle.net/MarbleStrain/FdL44/   注意Test div是如何不可见的   如果窗口不够大。一世   不想破坏布伦特的答案或其他任何东西   他的答案同样有效,取决于   您想要哪种流量。我只是   想指出差异   在两个结果之间。
#headerwrap {
    background: url(\'../images/top.png\') no-repeat fixed center 0; /*this will put the image at the top-middle of this div*/
    width: 100%; /*this sets this div to whatever size the window is, which helps with removing the horizontal scrollbar*/
    height: 100px;
    text-align: center; /*this will move any child elements to the center (specifically for ie)*/
    pointer-events: none;
    overflow: hidden; /*this hides any child elements that are outside the range of this element*/
}
#header{
    width: 998px;
    margin: 0 auto; /*center header for all browsers except ie*/
    height:100px;
    z-index: 1;
    pointer-events: none;
    text-align: left; /*makes sure that contents are lined up to the left (otherwise inherited from the parent which is center)*/
}
我还更改了一些样式,以使所有内容都跨浏览器居中。为了避免显示水平滚动条,请将#headerwrap \的溢出属性设置为隐藏。 那应该解决您的两个问题。     

要回复问题请先登录注册