无论页面大小如何，标题图像均居中

Question

我的网页有一个始终保留在窗口顶部的标题图像。当窗口最大化时，标题图像居中，但在小窗口（或智能手机浏览器）中查看时，标题设置在窗口的左侧，右侧被裁剪。由于标题 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>

页面宽 690 像素，标题为 998 像素）

任何帮助将不胜感激。

Answer 1

您需要在具有 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/

你真的不知道为此需要一个包装器。

Answer 2

正如布伦特所说，您确实需要负的左边距，但该边距会根据用户的浏览器分辨率而变化，如果用户调整浏览器的大小，则可能会出现问题。

为了计算出这个边距，我使用了一个简单的 jquery 方法，每次都像魅力一样工作：

jQuery(window).resize(function() {
  var width = jQuery(document).width();
  var margin = (yourImageWidth-width)/-2;
  jQuery('.yourCssClassForYourHeader').css('margin-left', (margin)+'px');
});

必须在文档第一次准备好时调用此函数，然后每次用户调整浏览器大小时调用它。

Answer 3

标题缩小以适应窗口是否可以接受？
另外，您需要这是一个纯 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;顶部：0px;

希望这有帮助！

Also, you have a forward slash in your wrapper div that needs to go :)

Answer 4

另一种选择是从 #header div 中删除 background 属性，并将其放入 #headerwrap 中，如下所示：

编辑：

我添加了评论来帮助解释
CSS 更改的效果。

编辑@Brent的答案：

布伦特的回答也不错，但是
确实提出了一个问题：
内容本身的定位。
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的overflow属性设置为hidden。

这应该可以解决你的两个问题。