导航栏中间的图像

Question

我想将图片放在我页面上导航栏的中心。这是我想要的结果（例子）：

如何使其工作（没有引导程序）。

现在我的代码看起来像这样：

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

}

但它看起来很糟糕并且不起作用......也许将两个导航栏（左侧和右侧）放入主导航栏容器的更好方法是什么？

Answer 1

使用Flexbox

  

但是只有在您拥有奇数个孩子并且图片必须位于中心时才会有效。

为了使其具有响应性，您应该使用%或vw（查看宽度）

检查我使用vw的示例，并删除保证金以将其粘贴到顶部。

  

FYI - 触发器是onclick，因此在加载时单击图像;）

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

Answer 2

你可以将整个无序列表集中在一起吗？

nav ul {
 text-align: center;
}