CSS居中页眉图片

Question

我有一张头部图片，需要在屏幕上重复显示，以便无论屏幕分辨率如何，头部始终被拉伸100%。我已经将图像放置在包装器div中。 在该DIV的顶部，我还希望放置“标志”，使其始终居中于屏幕顶部。

我知道也可以用其他方法实现，但我已经尝试过在photoshop中只将标志放在头部上，虽然我无法使图片居中。

请查看下面的代码：

HTML:

<div id="wrapperHeader">
    <div id="header">
             <img src="images/logo.png" width="1000" height="200" alt="logo" />
    </div> 
</div>

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;
}

同时，我了解margin-left:auto;等属性的使用方法。但如果有人能够在这里适当地解释如何使用它们，我将不胜感激。

谢谢！

- dyatesupnorth

Answer 1

如果我理解正确，我认为这就是你需要的：

<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;
}

- Billy Moat

---

太棒了！！感谢所有给我回复的人，我尝试了所有方法，它们都接近（！）但是Billy Moat完美地解决了它，再次感谢你！ - dyatesupnorth

@David Yates - 很高兴为您服务 :) - Billy Moat

Answer 2

在CSS中，您无需设置标题的宽度，只需使用此代码将背景图像置于中心：

background: url("images/logo.png") no-repeat top center;

您可以使用img标签，并在

中加入align="center"属性。

- haynar

Answer 3

如果你设置margin为margin:0 auto，那么图片将居中显示。

这将给上下方向设置一个margin为0，左右方向设置为“auto”。由于div有一个宽度（200px），图片的宽度将为200px，浏览器会自动将剩余页面宽度的一半分别设置为左右外边距，从而使图片居中显示。

- Fermin