如何在引导程序中将导航栏品牌居中[重复]答案

【问题标题】：How to center the navbar-brand in bootstrap [duplicate]如何在引导程序中将导航栏品牌居中[重复]
【发布时间】：2020-03-14 02:56:37
【问题描述】：

我尝试了一些方法，例如使用弹性框自动边距和变换等，但我似乎无法将这个导航栏品牌居中，因为它位于右侧和按钮之间，我希望它忽略按钮并且只使用页面视图端口将整个页面居中，但我无法做到这一点？

编辑： 由于我的第一个版本在其他人将其标记为重复之前已关闭，请实际阅读该问题，因为 ZIM 链接的解决方案不像我的问题第一句话中所述的那样工作：

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

【问题讨论】：

【解决方案1】：

将position: absolute 添加到您的按钮怎么样？

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

【讨论】：

【解决方案2】：

方法一

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

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

使切换按钮absolute 定位也有效。

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

【讨论】：