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; 等等,如果有人能解释如何在这里适当使用它们,我将不胜感激.

谢谢!

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