使用div製作頁面中心

Question

說logo1和logo2每個100px長，我想覆蓋一半的標誌。 什麼是製作兩個標誌的最好方式和最簡單的方式，並將它們放在頁面的中心。

Answer 1

把你的標識放在<div>中，並給它margin: 0 auto;。

然後給logo2z-index: 1;，使它在logo1之上分層。

Here's a JSFiddle demo。

頁：

<div class="center"> 
    <img src="Link/To/Your/Image/For/Logo1" id="logo1" /> 
    <img src="Link/To/Your/Image/For/Logo2" id="logo2" /> 
</div> 

CSS：

.center { 
    width: 210px;  
    margin: 0 auto; 
    position: relative; 
    left: 10px; 
} 

#logo2 { 
    z-index: 1; 
    position: relative; 
    left: -10px;  
} 

如果使標誌重疊甚至更多（例如移動logo2 50像素與left: -50px;重疊，那麼你也必須改變周圍的位置div匹配與left: 50px;重疊，所以左側定位爲#logo2和.center應該是相同的，但是相反。

Answer 2

一種選擇是使用樣式position:absolute;。以下是一個例子。

<style> 
    .container{ 
     border:solid 1px red; 
     text-align:center; 
     height:500px; 
    } 
    #logo1, #logo2{ 
     width:100px; 
     height:100px; 
     display:inline; 
     position:absolute; 
     top:200px; 
    } 
    #logo1{ 
     border:solid 1px green; 
     left:450px; 
    } 
    #logo2{ 
     border:solid 1px blue; 
     left:540px;/*note 540 = 450 + (100 - 10)*/ 
    } 

</style> 

頁：

<div class="container"> 
    <div id="logo1"></div> 
    <div id="logo2"></div> 
</div>