2017-06-05 80 views
0

如何將我的徽標居中在我的導航欄中?我已經有了它的中心,但我遇到的問題是當我在內容區域放置圖像時,圖像掩蓋了部分徽標。我確實希望徽標類型從導航鏈接中稍微放下一點。我不希望徽標和內容圖像之間有巨大的空間。有沒有辦法實現這一目標?附圖是我試圖完成的設計。提前致謝!如何將我的徽標置於導航欄中?

body { 
 
    font-family:Georgia; 
 
    font-size:12pt; 
 
    } 
 

 
    * { 
 
\t margin:0; 
 
\t padding:0; 
 
    } 
 

 
    #header { 
 
    background-color:#000000; 
 
    height:100px; 
 
    margin:auto; 
 
    } 
 

 
    #header ul { 
 
    margin:0 auto; 
 
    width:35%; 
 
    padding:12px; 
 
    list-style: none; 
 
    } 
 

 
    #header li { 
 
    float: left; 
 
    } 
 

 
    #header a { 
 
    padding:0 14px; 
 
    text-align:center; 
 
    display:block; 
 
\t text-decoration:none; 
 
\t color:#FFFFFF; 
 
\t font-size:18pt; 
 
\t }  
 

 
    #header ul li a.logo { 
 
    background: url("Logo.png"); 
 
    background-repeat:no-repeat; 
 
    height:140px; 
 
    display:block; 
 
    width:140px; 
 
    padding: 0; 
 
    
 

 
    .clearfix { 
 
    *zoom: 1; 
 
    } 
 

 
    .clearfix:after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
    } 
 

 
    #MainContent { 
 
\t } 
 

 
    #MainContent img { 
 
\t margin-top:-10px; 
 
\t position:absolute; 
 
\t left:0; 
 
\t width:100%; 
 
    } 
 

 
    }
<body> 
 
\t <div id="header" class="clearfix"> 
 
\t \t 
 
    \t <ul class="Nav">  
 
\t \t \t <li><a href="index.html">Home</a></li> 
 
\t \t \t <li><a href="menu.html">Menu</a></li> 
 
\t \t \t <li><a href="index.html" class="logo"></a></li> 
 
\t \t \t <li><a href="gallery.html" >Gallery</a></li> 
 
\t \t \t <li><a href="about.html">About</a></li> 
 
\t \t \t \t 
 
      </ul> 
 
       
 
      </div> 
 
\t <div id="MainContent"> 
 
\t <img src="Photos/drinks.jpeg"> 
 
\t </div> 
 
</body> 
 

 
    
 

+0

可以在設置您的徽標圖像的z-index以便它總是坐在上面DOM中的任何其他圖像? – Tik

+0

工作正常!謝謝sooooo多! –

回答

相關問題