Html 在div中相对定位导航栏元素

我想要一个像这样的导航条

我在div的中间有一个图像，我想写CSS，以便我的导航元素（home，……）有一个相对的边缘，而不是在图像中。

html

---

只需更改源代码顺序将是最简单的方法…然后

内联块

和

垂直对齐：中间

.nav{
左：0；
右：0；
背景颜色：浅蓝色；
位置：固定；
底部0px；
高度：20vh；
保证金：5px；
文本对齐：居中；
}
#钻石{
最大高度：100%；
宽度：自动；
}
.导航a，
.导航img{
显示：内联块；
垂直对齐：中间对齐；
边缘：0 1米；
}

您可以在项目中使用flexbox吗？如果是这样，那可能就是你想要走的路线。另外，对于

nav_left

和

nav_right

，应该使用类而不是ID。拥有多个同名ID是无效的，而这正是类的用途。为什么不改变HTML顺序……这并没有什么特别的地方阻止你？@Don'tclickonmyprofile我给你举了个例子。您可以看到css非常小，可以达到您想要的效果。@zgood非常感谢您的努力：D我将选中flexbox Out考虑在您的答案中添加/建议@media查询，这确实很简单，但当缩小屏幕尺寸时，它看起来很时髦，我打赌OP会很快解决这个问题。这是一个完全不同的讨论…与手头的问题不太相关。

<div class="nav">
  <img id="diamond" src="{% static "blog/img/Diamond.png" %}">
  <a id="nav_left" href="{% url 'index' %}">Home</a>               
  <a id="nav_left" href="{% url 'guides' %}">Guides</a>                                        
  <a id="nav_right" href="{% url 'stream' %}">Stream</a>                                       
  <a id="nav_right" href="{% url 'about' %}">About</a>                                         
</div>

.nav {
  left: 0;
  right: 0;
  background-color: #FFFFFF;
  position: fixed;
  bottom 0px;
  height: 20vh;
  margin: 5px;
}

#nav_left {
  float: left;
  color: black;
}

#nav_right {
  float: right;
  color: black;
}

#diamond {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  max-height: 100%;
}