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

Posted 2023-03-05

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

【英文标题】：Centre a header image regardless of page size

【发布时间】：2011-09-22 10:55:43

【问题描述】：

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

我希望页眉图像始终居中，如果窗口小于页眉，则左右两边都被裁剪。此外，只有在窗口宽度小于页面宽度时才会打开水平滚动条。

这张图片可能会更清楚地解释它：

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）

任何帮助将不胜感激。

【参考方案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/

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

【讨论】：

当它比浏览器更宽时，相对定位的包装器有助于水平滚动条。删除它并调整以下元素的填充以解决固定定位的标题“不流畅”。

【参考方案2】：

您确实需要负边距，就像 Brent 说的那样，但是该边距会根据用户的浏览器分辨率而有所不同，并且如果用户调整浏览器的大小可能会出现问题。

为了弄清楚那个边距，我使用了一个简单的 jquery 方法，每次都像一个魅力一样工作：

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

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

【参考方案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 :)

【讨论】：

纯 HTML 和 CSS 会很好，但不是必需的。如果缩小标题可以工作，那很好，我将如何实现它？

请稍等。我正在为你写些东西

只要改变 padding 的值来设置两边的间隙（不管浏览器窗口的大小，两边总是均匀的）

【参考方案4】：

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

编辑：

我添加了 cmets 来帮助解释 对 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。

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

【讨论】：

这也是一个很好的答案，但是您的 cmets 应该真正使用正确的 /* */ 语法，所以这样做会不那么乏味 jsfiddle.net/w8P2S/6 ;)

哦，哈哈。对于那个很抱歉。我不再做太多的网络编程了。我主要做 c#，上面的语法可以正常工作。我会改变的。