如何在导航栏中将我的徽标居中？答案

【问题标题】：How do I center my logo in the navigation bar?如何在导航栏中将我的徽标居中？
【发布时间】：2017-06-06 06:24:39
【问题描述】：

如何在导航栏中将徽标居中？我已经把它居中了，但是我遇到的问题是当我在内容区域中放置一个图像时，图像覆盖了徽标的一部分。我确实希望徽标从导航链接中掉下来一点。我不想要徽标和内容图像之间的巨大空间。有没有办法可以做到这一点？附上的图片是我想要完成的设计。提前致谢！

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

    * {
	margin:0;
	 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;  
	text-decoration:none;
	color:#FFFFFF;
	font-size:18pt;
	}    

    #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 {
	}

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

    }

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

【问题讨论】：

您能否设置您的徽标图像 z-index 以使其始终位于 DOM 中的任何其他图像之上？
成功了！非常感谢！

标签： html css

【解决方案1】：

您可以将z-index 添加到您的.logo 类中。这会将其呈现在图像上方。

例如

.logo {
  z-index: 100;
}

https://developer.mozilla.org/de/docs/Web/CSS/z-index

【讨论】：