Html 带有居中标志的导航条_Html_Css_Center_Nav

Html 带有居中标志的导航条

html css

Html 带有居中标志的导航条,html,css,center,nav,Html,Css,Center,Nav,所以我在这里和网上看到了这个问题的几个答案，但我似乎无法让它对我起作用这是第一次编写基础以外的任何东西（我只有一周的时间来完成一堂课）。我尝试在中间使用两个UL的代码：“代码> div ，但是一个代码> UL < /代码>，logo图像作为 LI似乎使我最接近。我的问题是，虽然logo实际上是居中的，但我无法让另一个li的围绕logo居中，而让整个导航栏本身在页面上居中。该网站还必须是响应性的（我知道还有一个问题，但我不想用一个与响应性设计不兼容的解决方案来纠缠我的代码）。我也不确定如何让

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

这是第一次编写基础以外的任何东西（我只有一周的时间来完成一堂课）。我尝试在中间使用两个UL的代码：“代码> div <代码>，但是一个代码> UL < /代码>，logo图像作为<代码> LI<代码>似乎使我最接近。我的问题是，虽然logo实际上是居中的，但我无法让另一个

li的围绕logo居中，而让整个导航栏本身在页面上居中。
该网站还必须是响应性的（我知道还有一个问题，但我不想用一个与响应性设计不兼容的解决方案来纠缠我的代码）。我也不确定如何让标志和其他李的垂直居中。我尝试了“垂直对齐：中间”
，但没有成功。非常感谢你的帮助
这是我的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>

您可以访问该网站。
不知道为什么要在菜单中使用徽标。您可以使用position
属性将其放置到中心。使用当前的结构响应版本也很困难
对于桌面版本，请在css中添加以下代码
.nav ul li:nth-child(3){
    width:250px;
}

这将创建一个适当的结构。但我建议，不要使用当前的结构来居中标识。从菜单中分离徽标并将其放置在单独的div中，然后使用position属性对其进行定位。
这是更新提琴
你能将标题的背景改为徽标而不重复吗
.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>


为什么要使用列表标记。。。当创建下拉菜单时，列表只真正属于标题…这正是我见过的大多数其他人创建导航栏的方式。如果你有更好的解决方案，我洗耳恭听。我不会在主导航中添加徽标。除非你有什么奇怪的要求，否则就把它放在导航舱外面。@innerurge1这是我做模型的方式，我必须保持这种方式来评分。我只是想澄清一下，我不是说视觉必须在那里。它是否必须存在于代码中，因为这看起来很奇怪。这行得通。如果没有，我可以使用你的HTML。
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>