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

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

|| 我的网页的标题图像始终保留在窗口顶部。当窗口最大化时，标题图像居中，但是在小窗口（或智能手机浏览器）中查看时，标题设置在窗口的左侧，右侧被裁剪。因为标题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 \的溢出属性设置为隐藏。那应该解决您的两个问题。

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

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

解决方法

相关推荐