如何在引导程序中使导航栏品牌居中

Question

我尝试了一些操作，例如使用弹性框，自动页边距和转换等，但是我似乎无法使该navbar品牌居中，因为它居于右侧和按钮之间，并且我希望它忽略该按钮并使用页面查看端口将整个页面居中，但我只是无法做到这一点？

https://www.codeply.com/p/RXiaRJEqWj

编辑： 由于我的第一个版本已经关闭，因此没有人将其标记为重复版本，请实际阅读该问题，因为ZIM链接的解决方案不能像我的问题的第一句话中所述：

  

我尝试了一些操作，例如使用弹性框，自动边距和转换等，但是我似乎无法将导航栏品牌居中

Answer 1

如何将position: absolute添加到您的按钮？

这将使该按钮在导航栏中不再具有其“保留空间”，这将使您的目标div在整个导航栏中居中。

Answer 2

方法1

要将徽标放置在屏幕中央，我们需要将其向左拉54px，这是位于屏幕左上方的切换按钮的宽度。

.navbar-light .navbar-brand {
   transform: translateX(-54px);
}

---

方法2

使切换按钮absolute定位也可以。

.navbar-light .navbar-toggler {
   position: absolute;
   top: 1rem;
   left: .5rem;
}

---