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>
可以在設置您的徽標圖像的z-index以便它總是坐在上面DOM中的任何其他圖像? – Tik
工作正常!謝謝sooooo多! –