Html 无论页面大小如何，都将标题图像居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6475399/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Centre a header image regardless of page size
提问by James
My webpage has a header image that always remains at the top of the window. When the window is maximised the header image is centred, but when viewing in a small window (or a smart-phone browser) the header is set to the left of the window, and the right side cropped. Because the header div is wider than the page content, the horizontal scroll-bar appears when the window is smaller than the header, not the page.
我的网页有一个始终保留在窗口顶部的标题图像。当窗口最大化时，标题图像居中，但在小窗口（或智能手机浏览器）中查看时，标题设置在窗口的左侧，右侧被裁剪。因为页眉 div 比页面内容宽，所以当窗口小于页眉时会出现水平滚动条，而不是页面。
I would like the header image to be centered on the page at all times, with both left and right sides being cropped if the window is smaller than header. Also the horizontal scroll-bar to only be turned on if window width is less than page width.
我希望标题图像始终位于页面的中心，如果窗口小于标题，左右两侧都会被裁剪。此外，只有在窗口宽度小于页面宽度时才会打开水平滚动条。
This image might explain it more clearly:
这张图片可能会更清楚地解释它：
http://postimage.org/image/49ne3k3o/
http://postimage.org/image/49ne3k3o/
My code so far:
到目前为止我的代码：
CSS:
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;
}
and HTML implementation:
和 HTML 实现：
<div id="headerwrap"\>
<div id="header">
</div>
</div>
(the page is 690px wide, the header is 998px)
（页面宽690px，页眉998px）
Any help would be much appreciated.
任何帮助将非常感激。
采纳答案by Brent
You need to set left: 50%on the header element that has position: fixed, and then apply a negative margin of half that element's width to center it.
您需要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;
}
Here's a quick fiddle: http://jsfiddle.net/blineberry/w8P2S/
这是一个快速的小提琴：http: //jsfiddle.net/blineberry/w8P2S/
You don't really need a wrapper for this.
你真的不需要一个包装器。
回答by javlae
You do need the negative margin-left, like Brent says, but that margin will vary depending on the user's browser resolution, and could be a problem if the user resizes the browser.
正如 Brent 所说，您确实需要负边距-left，但该边距将根据用户的浏览器分辨率而有所不同，如果用户调整浏览器大小，则可能会出现问题。
To figure out that margin I've used a simple jquery method that works like a charm everytime:
为了找出那个边距，我使用了一个简单的 jquery 方法，每次都像魅力一样工作：
jQuery(window).resize(function() {
var width = jQuery(document).width();
var margin = (yourImageWidth-width)/-2;
jQuery('.yourCssClassForYourHeader').css('margin-left', (margin)+'px');
});
This function must be called on document ready for the first time, and then it gets called everytime the browser is resized by the user.
必须在第一次准备好文档时调用此函数，然后每次用户调整浏览器大小时都会调用它。
回答by dbooth
Another option would be to remove the backgroundproperty from the #headerdiv and put it in the #headerwraplike so:
另一种选择是从#headerdiv 中删除background属性并将其放入#headerwrap 中，如下所示：
EDIT:
I added comments to help explain the effects of the changes to css.
EDIT @Brent's answer:
Brent's answer is also good, but it does bring up an issue of where the contents position themselves. http://jsfiddle.net/MarbleStrain/FdL44/Notice how the Testdiv is invisible if the window isn't big enough. I don't want to dis Brent's answer or anything as his answer is equally valid depending on which flow you are wanting. I just want to point out the difference between the two results.
编辑：
我添加了注释来帮助解释 css 更改的影响。
编辑@Brent 的回答：
布伦特的回答也很好，但它确实提出了内容自身定位的问题。 http://jsfiddle.net/MarbleStrain/FdL44/注意如果窗口不够大，Testdiv 是如何不可见的。我不想否定布伦特的答案或任何其他内容，因为他的答案同样有效，具体取决于您想要的流量。我只想指出两个结果之间的差异。
#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)*/
}
I also changed some of the style to make everything center cross-browser. And to keep the horizontal scrollbar from showing up, you set the #headerwrap's overflowproperty to hidden.
我还更改了一些样式，使所有内容都以跨浏览器为中心。为了不显示水平滚动条，您将#headerwrap的overflow属性设置为hidden。
That should solve both your issues.
那应该可以解决您的两个问题。
回答by Inversus
Would it be acceptable for the the header to shrink to fit the window? Also, do you need this to be a pure HTML / CSS solution?
标题缩小以适应窗口是否可以接受？另外，您是否需要将其作为纯 HTML/CSS 解决方案？
edit:
编辑：
Here's a little script I just wrote that will resize both divs to the size of the browser window. It doesn't require any libraries (like jQuery).
这是我刚刚编写的一个小脚本，它会将两个 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>
Or if you want a gap at both sides you could do something like:
或者，如果您希望双方都有差距，您可以执行以下操作：
var padding = 50;
document.getElementById('header').style.width = (clientWidth - (padding * 2)) + "px";
document.getElementById('header').style.left = padding + "px";
So ya, in summary:
所以，总而言之：
<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>
Also, change the wrapper to position: absolute; top: 0pxand the inner div to position: absolute; top: 0px;
此外，将包装器更改为position: absolute; top: 0px和内部 div 更改为position: absolute; top: 0px;
Hope this helps!
希望这可以帮助！
Also, you have a forward slash in your wrapper div that needs to go :)
