使用居中徽标调整导航栏中的间距答案

【问题标题】：Adjusting spacing in Nav Bar with Centered Logo使用居中徽标调整导航栏中的间距
【发布时间】：2014-04-02 09:42:17
【问题描述】：

在这里，我设置了一个带有居中徽标的导航栏。唯一的问题是我无法让它看起来与间距完全正确。徽标设置为“位置：绝对”“左：50％”和“左边缘：-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.

【问题讨论】：

标签： html css positioning nav spacing

【解决方案1】：

这就是我要做的，这正是我通常做事的方式。

我会采用 li 的填充，然后将 105px 填充添加到标题（或导航）的顶部。接下来，为每个 li 元素（比如 48px）添加一些任意的 margin-right，同时当然将 li:last-child 设置为 margin: 0;接下来取掉 li#logo 的 padding-top 和高度并将其更改为：

#logo { width: 250px; position: relative; }

最后，如果您要使用绝对定位，只需使用变换使徽标居中即可。这本质上与 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%);
}

我使用了这段代码，它非常适合我。如果您仍然遇到问题，我也可以为您制作小提琴或其他东西。

【讨论】：

感谢您的帮助。我绝对更喜欢这种设置方式，但我仍然没有让导航项目更加平等地围绕徽标。这就是我所看到的>>tinypic.com/r/315fpnb/8这主要是困扰我的“菜单”右侧的空间
等一下，让我看看为什么它没有给你它给我的东西。
去掉 li 的所有填充。应该是：nav.nav ul li { margin-right: 70px; } nav.nav ul li:last-child { 边距: 0; }
当然。填充将其丢弃，因为填充在元素内部，因此它被包含在图像的绝对定位中，而边距在元素外部没有同样的问题。另外，将我的答案标记为正确会很棒:)。
哈哈，对不起。网站有点新。现在已经被标记了！另外，如果不是太麻烦，我不确定为什么导航 div 稍微偏离中心，比如靠近页面左侧。我将其边距设置为 'margin: 0 auto;'