如何在导航栏中居中徽标？
[英]How do I center my logo in the navigation bar?
问题描述
如何将徽标放在导航栏中？ 我已经把它居中了，但是我遇到的问题是当我在内容区域中放置图像时，图像覆盖了徽标的一部分。 我确实希望徽标类型从导航链接中删除一些。 我不希望徽标和内容图像之间有巨大的空隙。 有没有办法可以做到这一点？ 所附图片是我要完成的设计。 提前致谢！
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>
1 个解决方案
解决方案1
1 已采纳 2017-06-05 22:18:37
您可以在.logo类中添加z-index 。 这将在图像上方进行渲染。
例如
.logo {
z-index: 100;
}
我如何居中导航栏？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.