小型设备上的中心徽标问题

Question

我在引导导航栏菜单上的居中徽标存在问题；我把标志放在导航栏的中心；它在桌面上运行良好，但是当我将页面大小调整为较小的设备时，由于右侧存在汉堡菜单按钮及其使用的相对像素，徽标会向左侧偏离中心。

如何确保在屏幕较小的设备上徽标保持居中？

<nav class="navbar navbar-expand-xl navbar-toggleable-md navbar-light bg-white" id="nav1">
    <div class="navbar-collapse collapse w-100 order-1 dual-collapse2">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item home">
                <a class="nav-link" href="#"><a href="https://www.weddinginsicily.co.uk/">HOME <span class="sr-only">(current)</span></a> </li>
    <li class="nav-item"> <a class="nav-link" href="#"><a href="https://www.weddinginsicily.co.uk/wedding_sicily_our_weddings.html">OUR WEDDINGS</a> </li>
        </ul>
    </div>
    <div class="mx-auto order-0 order-xl-2">
     <a class="navbar-brand mx-auto" href="/"><img src="Imagine/00 Top Logo 2021.png" alt="Logo 2021" width="275" height="127"></a></div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item">
    <li class="nav-item"> <a class="nav-link" href="#"><a href="https://www.weddinginsicily.co.uk/wedding_sicily_legalities.html">LEGALITIES</a> </li>
        </ul>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

Answer 1

前言

在我们进入解决方案之前，需要注意的一点是，如果实施此解决方案并且窗口不够宽，无法在不重叠的情况下同时容纳徽标和切换器，它们就会这样做 - 重叠。

解决方案

1。样式

您可以使用transform 和position: absolute 来做到这一点：

.navbar-brand {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

/* to place the toggler above the logo, in case they overlap */
.navbar-toggler: {
  z-index: 10;
}

2。 HTML

HTML 中也存在一些问题。最重要的是缺少<a class="nav-link"> 的结束标签。请参阅this jsfiddle version 并检查 HTML 文本区域以了解 linter 突出显示问题的位置。此外，sr-only 类适用于屏幕阅读器，因此您希望将它包含在每个链接中，并确保文本内容与链接本身匹配——see this answer 对此进行了很好的解释。

这是 HTML 的重构版本：

<nav class="navbar navbar-expand-xl navbar-toggleable-md navbar-light bg-white" id="nav1">
  <div class="navbar-collapse collapse w-100 order-1 dual-collapse2">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item home">
        <a class="nav-link" href="https://www.weddinginsicily.co.uk/">
          HOME
          <span class="sr-only">Home</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.weddinginsicily.co.uk/wedding_sicily_our_weddings.html">
          OUR WEDDINGS
          <span class="sr-only">Our Weddings</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="mx-auto order-0 order-xl-2 navbar-brand-container">
    <a class="navbar-brand mx-auto" href="/">
      <img src="Imagine/00 Top Logo 2021.png" alt="Logo 2021" width="275" height="127">
    </a>
  </div>
  <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item">
        <a class="nav-link" href="https://www.weddinginsicily.co.uk/wedding_sicily_legalities.html">
          LEGALITIES
          <span class="sr-only">Legalities</span>
        </a>
      </li>
    </ul>
  </div>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

3。演示

请参阅this jsfiddle demo 了解完整的工作解决方案。

---

希望对您有所帮助！

Answer 2

在.navbar-toggler 中添加position: absolute。看看对你有没有帮助：

https://jsfiddle.net/omk9pg58/