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

Posted 2023-03-06

【中文标题】如何制作带有居中徽标的导航栏？ [复制]

【英文标题】：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

【参考方案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>