导航栏中间的图像

Image in the middle of navbar

我想在页面的导航栏中央放置一张图片。这是我想要的结果(示例):

如何让它工作(没有 bootstrap)。

现在我的代码是这样的:

<nav class="navigation">
            <ul class="navigation-list-1">
                <li class="navigation-list-item"><a href="#home">Home</a></li>
                <li class="navigation-list-item"><a href="#features">Features</a></li>
                <li class="navigation-list-item"><a href="#add-info">Add info</a></li>
                <li class="navigation-list-item"><img class="logo" src="assets/LOGO.png"></li>
                <li class="navigation-list-item"><a href="#form">Form</a></li>
                <li class="navigation-list-item"><a href="#team">Team</a></li>
                <li class="navigation-list-item"><a href="#contact">Contact</a></li>
            </ul>
        </nav>

和样式:

.navigation-list-item {
display: inline-block;
list-style: none;
font-size: 15px;
font-weight: bold;
padding: 15px;
border-top: 10px solid white;
margin-right: -5px;

}

.logo {
max-height: 5%;
max-width: 15px;
background: cornflowerblue;
border: 5px solid cornflowerblue;

}

但它看起来很糟糕而且不起作用...也许将两个导航栏(左和右)放入主导航栏容器中是更好的方法?

你能把整个无序列表居中吗?

nav ul {
 text-align: center;
}

使用 Flexbox

But it will only work if you are having odd number of children and image must be in the center.

为了使其响应,您应该使用 %vw(视图宽度)

查看示例,我在其中使用了 vw,还删除了边距以将其粘贴到顶部。

FYI- The trigger is onclick, so Click on the image when it's loaded ;)

function big() {
  var w = 5;
  var foo = setInterval(function() {
    if (w > 15) clearInterval(foo)
    w = w + 1;
    document.getElementById('logo').style.width = w + 'vw';

  }, 100);
}
.logo {
  width: 2vw;
  background: cornflowerblue;
  border: 5px solid cornflowerblue;
}

.outer {
  display: flex;
}

.outer>p {
  flex: 1;
  height: 70px;
  line-height: 70px;
  background: blue;
}

.outer>p>a {
  text-decoration: none;
  color: white;
}

.outer>p .logo {
  flex: 1;
}

p {
  text-align: center;
  margin: 0px;
}

body {
  margin: 0px;
}
<nav class="navigation">
  <div class="outer">
    <p class="navigation-list-item"><a href="#home">Home</a></p>
    <p class="navigation-list-item"><a href="#features">Features</a></p>
    <p class="navigation-list-item"><a href="#add-info">Add info</a></p>

    <p class="navigation-list-item"><img class="logo" id="logo" src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg" onclick="big()"></p>
    <p class="navigation-list-item"><a href="#form">Form</a></p>
    <p class="navigation-list-item"><a href="#team">Team</a></p>
    <p class="navigation-list-item"><a href="#contact">Contact</a></p>
  </div>
</nav>

无序列表示例 <ul>

刚刚将 flex 属性 添加到 <ul>

.navigation-list-item {
list-style: none;
font-size: 15px;
font-weight: bold;
}

.logo {
  position:absolute;
  
width: 10vw;
left:calc(50% - (10vw/2) - (10px/2));
background: cornflowerblue;
border: 5px solid cornflowerblue;
}

ul{
  display:flex;
  margin-left:-40px;

}
li{
  flex:1;
  background:yellow;
  border:1px solid green;
  height:70px;
  line-height:70px;
  text-align:center;
}

li>a{
  text-decoration:none;
}
<nav class="navigation">
  <ul class="navigation-list-1">
    <li class="navigation-list-item"><a href="#home">Home</a></li>
    <li class="navigation-list-item"><a href="#features">Features</a></li>
    <li class="navigation-list-item"><a href="#add-info">Add info</a></li>
    <li class="navigation-list-item"><img class="logo" src="https://cdn.sstatic.net/Sites/Whosebug/company/img/logos/so/so-icon.svg?v=6f4af2d2d158"></li>
    <li class="navigation-list-item"><a href="#form">Form</a></li>
    <li class="navigation-list-item"><a href="#team">Team</a></li>
    <li class="navigation-list-item"><a href="#contact">Contact</a></li>
  </ul>
</nav>