CSS居中的标题图片

我有一个标题图片在屏幕上重复出现，因此无论屏幕分辨率如何，标题始终都会伸展100％，我已将图片放在包装div中。在DIV的顶部，我也希望放置'logo'，使它始终居中在屏幕的顶部。CSS居中的标题图片

我很欣赏这可以通过另一种方式完成，并且已经尝试在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; 
}

而且，我知道保证金左的特性：自动;等等。尽管如果有人能解释如何在这里适当地使用它们，我将不胜感激。

谢谢！

来源

2012-07-17 dyatesupnorth

你需要给的#header位置：相对否则左：50％将被忽略 – Turnip 2012-07-17 14:51:03

我想这是你所需要的，如果我理解正确你：

<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-17 15:04:53

绝对精彩！并且感谢所有给我答复的人，因为我尝试了他们，他们全都来了（！）接近..但是比利护城队完美地钉牢了它，我再次感谢你！ – dyatesupnorth 2012-07-17 16:54:32

@大卫耶茨 - 很高兴的服务:) – 2012-07-17 21:41:28

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

这将使top + bottom的边距为0，左右边距为'auto'。由于div的宽度（200像素），图像宽度为200像素，浏览器会自动将左右页边距设置为页面剩余空间的一半，这将导致图像居中。

来源

2012-07-17 14:51:29 Fermin

你不需要设置在CSS头部的宽度，就用这个代码把背景图像为中心：

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

，或者你也可以只使用img标签，并把align="center"在div

来源

2012-07-17 14:51:51 haynar

CSS居中的标题图片

回答

相关问题