Question

我的网页上有一个标题图片，始终保留在窗口顶部。当窗口最大化时，标题图像居中，但是当在小窗口（或智能手机浏览器）中查看时，标题设置在窗口的左侧，右侧裁剪。由于标题div比页面内容宽，因此当窗口小于标题而不是页面时，会出现水平滚动条。

我希望标题图像始终位于页面的中心位置，如果窗口小于标题，则会裁剪左右两侧。如果窗口宽度小于页面宽度，也只能打开水平滚动条。

此图片可能会更清楚地解释：

到目前为止我的代码：

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）

非常感谢任何帮助。

Answer 1

您需要在包含left: 50%的标题元素上设置position: 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/

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

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; top: 0px;

希望这有帮助！

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

Answer 4

另一种选择是从 #header div中删除背景属性，并将其放入 #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 的溢出属性设置为隐藏。

这应解决你的问题。

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

4 个答案: