Question

所以我在这里和网络上看到了这个问题的几个答案，但我似乎无法让它为我工作。

这是第一次编写超出基础知识的任何东西（我只有一周的时间来完成一个课程）。我尝试使用两个ul，中间有一个div，但一个ul徽标图像为li似乎让我最接近。我的问题是，虽然徽标实际上是居中的，但我无法让其他li's围绕它居中，同时让整个导航栏本身在页面上居中。该网站也必须是responsive（我知道其他问题，但我不想使用与responsive design不兼容的解决方案来解决我的代码问题）。我也不确定锄头可以得到徽标，其他的是垂直居中的。我试过'vertical-align: middle'但没有成功。非常感谢您的帮助。

这是我的HTML。

<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>

和CSS。

.header {
    width: 960px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    }

div ul li{
    display: inline-block;
    padding: 60px 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;
    }

您可以访问网站 [here]。

Answer 1

不知道你为什么在菜单中使用徽标。您可以使用position属性将其放置到中心。使用当前结构响应版本也很困难。

对于桌面版，请在css中添加以下代码

.nav ul li:nth-child(3){
    width:250px;
}

这将创建一个合适的结构。但我建议，不要使用当前的结构来标识徽标。从菜单中单独标识并将其放在单独的div中，并使用位置属性进行定位。

Answer 2

以下是更新小提琴http://jsfiddle.net/JtfBP/

#logo {
    height: 60px;
    padding: 0;
    width: 250px;
}

Answer 3

您是否可以将标题的背景改为徽标而不是重复？

.header {
    width: 965px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    background:url('Images/pantry logo.png') center;
    }

使用单独的div图层而不是ul列表，它们使用与标题高度相同的div类（div.navigator），然后在css中使用display:float和float: left。

div.navigator {
    list-style: none;
    text-decoration: none;
    width: 192px;
    height: 200px;
    padding: 60px 70px 40px 0;
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size: 18px;
    color: #4f4d4b;
    text-decoration: none;
    display: float;
    float: left;
    }

所以您的标题代码现在是：

<div class="header">
    <div class="nav"><a href="#">HOME</a></div>
    <div class="nav"><a href="#">MENU</a></div>
    <div class="nav"></div>
    <div class="nav"><a href="#">CONTACT</a></div>
    <div class="nav"><a href="#">ABOUT</a></div>
</div>

带有居中徽标的导航栏

3 个答案: