4

我有一个在屏幕上重复的标题图像，因此无论屏幕分辨率如何，标题始终拉伸 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; 的属性。等等。尽管如果有人能在这里解释如何适当地使用它们，我将不胜感激。

谢谢！

4

3 回答 3

10

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

<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;
}
于 2012-07-17T15:04:53.457 回答
3

如果您将边距设置为margin:0 auto图像将居中。

这将使 top + bottom 的边距为 0，而 left 和 right 的边距为“auto”。由于 div 有一个宽度（200 像素），因此图像的宽度为 200 像素，浏览器会自动将左右边距设置为页面左侧的一半，这将导致图像居中。

于 2012-07-17T14:51:29.997 回答
3

您不需要在 css 中设置标题的宽度，只需使用以下代码将背景图像作为中心：

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

或者你可以只使用img标签并放入align="center"div

于 2012-07-17T14:51:51.140 回答