我有一个在屏幕上重复的标题图像,因此无论屏幕分辨率如何,标题总是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;等等。如果有人能解释如何在这里适当地使用它们,我将不胜感激。
谢谢!
答案 0 :(得分:9)
我认为如果我正确理解你,这就是你所需要的:
<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;
}
答案 1 :(得分:3)
如果您将边距设置为margin:0 auto
,则图像将居中。
这将使top + bottom的边距为0,左右边缘为&#39; auto&#39;。由于div的宽度为(200px),因此图像宽度为200px,浏览器会自动将左右边距设置为页面上剩余边距的一半,这将导致图像居中。
答案 2 :(得分:3)
你不需要在css中设置标题的宽度,只需使用以下代码将背景图像作为中心:
background: url("images/logo.png") no-repeat top center;
或者您可以使用img
代码并将align="center"
放入div