这里我设置了一个带有居中 Logo 的导航栏。唯一的问题是我不能让它在间距上看起来很正确。 Logo 设置为“position: absolute”“left: 50%”和“margin-left: -125px”，因此始终位于中心。现在我只需要让文本以更对称的方式围绕它平衡，但我似乎不知道该怎么做。
这是 HTML
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li class="navright"><a href="#">HOME</a></li>
<li class="navright"><a href="#">MENU</a></li>
<li id="logo"><a href="#"><img src="Images/pantry logo.png" width="536" height="348"/></a></li>
<li class="navleft"><a href="#">CONTACT</a></li>
<li class="navleft"><a href="#">ABOUT</a></li>
</ul>
</div>
</div><!--end header-->
还有 CSS。
.header {
width: 960px;
height: 200px;
margin: 0 auto;
text-align: center;
position: relative;
}
div ul li {
display: inline-block;
padding: 105px 70px 40px 0;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 18px;
color: #4f4d4b;
text-decoration: none;
list-style: none;
}
div ul li a {
list-style: none;
text-decoration: none;
color: #4f4d4b;
}
.nav ul li a:visited {
text-decoration: none;
color: #4f4d4b;
}
#logo a img {
width: 250px;
height: auto;
position: absolute;
left: 50%;
margin-left: -125px;
display: inline-block;
}
#logo {
height: 60px;
padding-top: 40px;
width: 250px;
}
可以去现场here.
最佳答案
这是我会做的，这也是我通常做事的方式。
我会采用 li 的填充，然后将 105px 填充添加到标题(或导航)的顶部。接下来，为每个 li 元素添加一些任意的 margin-right(比如 48px)，同时当然将 li:last-child 设置为 margin: 0;接下来取下 li#logo 的 padding-top 和 height 并将其更改为:
#logo { width: 250px; position: relative; }
最后，如果您要使用绝对定位，只需使用变换使 Logo 居中。这基本上与 margin-left 做同样的事情，但它更灵活一点。所以图片 CSS 应该是这样的:
#logo a img {
width: 250px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
我使用了这段代码，它非常适合我。如果您仍然遇到问题，我也可以为您制作 fiddle 或其他东西。
关于html - 使用居中 Logo 调整导航栏中的间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22111241/