Question

这里我设置了一个带有居中徽标的导航栏。唯一的问题是我无法通过间距看起来非常正确。徽标设置为'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.

Answer 1

这就是我要做的事情，这就是我通常会做的事情。

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

#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%);
}

我使用了这段代码，它对我来说很有效。如果你还有麻烦，我可以让你成为小提琴或其他东西。

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

1 个答案: