个人中心
gpt4 book ai didi

html - 如何让我的 Logo 在导航栏中居中？

转载 作者：太空宇宙 更新时间：2023-11-04 08:37:09 26 4
gpt4 key购买 nike

如何使我的 Logo 在导航栏中居中？我有点已经把它居中了，但我遇到的问题是当我在内容区域放置图像时，图像覆盖了部分 Logo 。我确实希望 Logo 从导航链接中稍微掉落一点。我不想在 Logo 和内容图像之间留出巨大的空间。有什么办法可以做到这一点？所附图片是我要完成的设计。提前致谢! 

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 添加到您的 .logo 类中。这会将其呈现在图像上方。

例如

.logo {
  z-index: 100;
}

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

关于html - 如何让我的 Logo 在导航栏中居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44378489/

26 4 0
文章推荐： Python - 正则表达式在Dataframe中拆分数据
文章推荐： java - 来自 JWebbrowser 的文档已完成事件
文章推荐： python - pandas - 忽略填充为 0 的行或列
文章推荐： java - 用java接收和处理电子邮件
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com