如何制作带有居中徽标的导航栏？ [复制]答案

【问题标题】：How can I make a navbar with a centered logo? [duplicate]如何制作带有居中徽标的导航栏？ [复制]
【发布时间】：2021-02-16 18:44:54
【问题描述】：

有没有办法可以制作这样的导航栏？

我为此使用 Bootstrap 4。

这是我当前的 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>

我已经可以将链接和徽标居中，但我似乎无法使背景看起来像轮廓。

【问题讨论】：

如果您使用的是 Bootstrap，我建议您阅读他们关于 Navbar 组件的部分：getbootstrap.com/docs/4.0/components/navbar
我已经可以将徽标和链接居中，但我无法让背景在底部显示徽标的形状
您希望徽标悬挂在导航栏底部吗？
是的，并且背景只填充了底部徽标所占据的空间。 i.stack.imgur.com/ChQL8.png
看这个例子：codeply.com/go/bp/mQh8DyRfWY

标签： html css bootstrap-4

【解决方案1】：

Bootstrap 本身并不提供这样的溢出。需要一些 CSS 来实现它。

.logo {
  position: relative;
  width: 4.5em;
  height: 0;
}
.logo .wrapper {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 100%;
}
.logo img {
  width: 100%;
  padding: 0.5em;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar bg-dark justify-content-center">
<ul class="nav">
<li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
<li class="nav-item"><a class="nav-link logo" href="#"><div class="wrapper bg-dark"><img src="https://freesvg.org/img/CircularFrameColour.png"></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
</ul>
</nav>

当然，您需要为响应性和可访问性提供额外的调整。

【讨论】：

【解决方案2】：

试试这个代码

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

【讨论】：