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居中的標題圖片

回答

相關問題