Html 如何制作带有居中徽标的导航栏？

有没有办法制作这样的导航条

我正在使用Bootstrap4进行此操作

以下是我当前的HTML代码：

<ul class="d-flex">
<li><a href="#">Link 1</a></li>
<li><a href="#"><img src="logo.png"></a></li>
<li><a href="#">Link 3</a></li>
</ul>

我已经可以中心的链接和标志，但我似乎不能使背景使它看起来像一个轮廓

试试这段代码

<ul class="d-flex justify-content-between w-100">
   <li><a href="#">Link 1</a></li>
   <li><a href="#" class="d-block text-center w-100"><img src="logo.png"></a></li>
   <li><a href="#">Link 3</a></li>
</ul>

引导不会在本机上提供这样的溢出。需要一些CSS来实现这一点

.logo{
位置：相对位置；
宽度：4.5em；
身高：0；
}
.logo.wrapper{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：0；
垫底：100%；
边界半径：100%；
}
.logo img{
宽度：100%；
填充：0.5em；
}

如果您使用的是引导，我建议您阅读导航栏组件部分：我已经可以将徽标和链接居中，但我无法使背景在底部显示徽标的形状您希望徽标悬挂在导航栏底部吗？是，而背景只填充了底部徽标占用的空间。参见此示例：