Html 以 CSS 为中心的标题图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11525132/
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
CSS centred header image
提问by dyatesupnorth
I have a header image that repeats across screen, so that no matter the screen resolution the header is always stretched 100%, I have placed the image inside a wrapper div. Over the top of that DIV I also wish to place the 'logo' such that it is always centred across the top of the screen.
我有一个在屏幕上重复的标题图像，因此无论屏幕分辨率如何，标题始终拉伸 100%，我已将图像放置在包装器 div 中。在该 DIV 的顶部，我还希望放置“徽标”，使其始终位于屏幕顶部的中心。
I appreciate this could be done another way and have already tried just having the logo on top of the header in photoshop although i couldn't get the image centred as I would of wished.
我很欣赏这可以用另一种方式来完成，并且已经尝试过在 Photoshop 中将徽标放在标题顶部，尽管我无法像我希望的那样将图像居中。
Please find my code below:
请在下面找到我的代码：
HTML:
HTML：
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" width="1000" height="200" alt="logo" />
</div>
</div>
CSS:
CSS：
#wrapperHeader{
position: relative;
background-image:url(images/header.png);
}
#header{
left: 50%;
margin-left: -500px;
background:url(images/logo.png) no-repeat;
width:1000px;
height:200px;
}
Also, I am aware of the properties of margin-left:auto; etc. Although I would be grateful if anyone could explain how to use them appropriately here.
另外，我知道 margin-left:auto; 的属性。等等，如果有人能在这里解释如何适当地使用它们，我将不胜感激。
Thanks!
谢谢！
回答by Billy Moat
I think this is what you need if I'm understanding you correctly:
如果我正确理解您，我认为这就是您所需要的：
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" alt="logo" />
</div>
</div>
div#wrapperHeader {
width:100%;
height;200px; /* height of the background image? */
background:url(images/header.png) repeat-x 0 0;
text-align:center;
}
div#wrapperHeader div#header {
width:1000px;
height:200px;
margin:0 auto;
}
div#wrapperHeader div#header img {
width:; /* the width of the logo image */
height:; /* the height of the logo image */
margin:0 auto;
}
回答by Fermin
If you set the margin to be margin:0 autothe image will be centered.
如果您将边距设置为margin:0 auto图像将居中。
This will give top + bottom a margin of 0, and left and right a margin of 'auto'. Since the div has a width (200px), the image will be 200px wide and the browser will auto set the left and right margin to half of what is left on the page, which will result in the image being centered.
这将使顶部 + 底部的边距为 0，左侧和右侧的边距为“自动”。由于 div 具有宽度 (200px)，因此图像宽度为 200px，浏览器将自动将左右边距设置为页面左侧的一半，这将导致图像居中。
回答by haynar
you don't need to set the width of header in css, just put the background image as center using this code:
您不需要在 css 中设置标题的宽度，只需使用以下代码将背景图像作为中心：
background: url("images/logo.png") no-repeat top center;
or you can just use imgtag and put align="center"in the div
或者你可以只使用img标签并放入align="center"div
