2017-06-05 76 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多! –

回答

相关问题