Css 引导导航栏中的品牌标志居中 我试图实现一个引导3的Navar，以便品牌标识始终保持在中间。代码如下：

超级UP1

试试这个：

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

将徽标居中50%并减去徽标宽度的一半，以便在放大和缩小时不会出现问题

---

参见2018年更新的

引导3 看看这个例子是否有帮助：

该品牌以

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}

您的标记用于引导2，而不是3。不再有

导航栏内部

编辑-另一种方法是使用

transform:translateX（-50%）


引导4
在Bootstrap 4中，
mx auto
或flexbox可用于使品牌和其他元素居中。请参阅以获取解释

另见：

这是一个古老的问题，但只是为了子孙后代

我发现最简单的方法是将图像作为navbar品牌的背景图像。只需确保输入自定义宽度即可

.navbar-brand
{
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    background-image: url('logo.png');
}

最简单的方法是css转换：

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

演示：



这种方式也适用于动态大小的背景图像的徽标，并允许我们使用文本隐藏类：

CSS:

HTML:

演示：

要仅在移动设备上实现这些结果，只需将上述css封装在媒体查询中：

@media (max-width: 768px) {

}

一个解决方案，其中的标志是真正的中心和链接是正当的

导航的最大推荐链接数为6，具体取决于每个链接中的单词长度

如果有5个链接，请插入一个空链接，并使用以下样式设置其样式：

class="hidden-xs" style="visibility: hidden;"

这样，链接的数量总是偶数



.navbar nav>li{
浮动：无；
垂直对齐：底部对齐；
}
#网站标志{
位置：相对位置；
垂直对齐：底部对齐；
底部：-35px；
}
#网站标志a{
利润上限：-53px；
}
导航










.navbar品牌{
保证金：自动；
}
由于它是一个flexbox（可能是由于
调整内容：之间的空格
BT4 css道具），如果添加第三个元素，即名称和按钮的同级元素，它将自然地将代码中的第二个元素居中

我只需在a之后添加
login



登录




搜寻
这看起来像是Bootstrap 2 to meThis这是唯一一个适用于我的动态品牌图像大小的解决方案。我只想在移动（屏幕sm）设备上居中显示徽标，因此我编写了一个媒体查询，将位置设置为绝对，将左侧边距偏移徽标图像宽度的1/2，并将左侧值设置为50%。工作起来很有魅力。将“.brand”更改为“.navbar brand”，它就会工作。您现在可以使用
transform:translateX（-50%）
isntead的
margin left
，使其与任何徽标宽度一起工作。@Lee，这是一个更好的解决方案。此外，对于将来使用原样答案的任何人，“徽标宽度”包括填充。我的徽标图像是130像素宽，但是默认的引导填充增加了30个额外像素，所以我不得不使用
左边距：-80px！重要的以适当居中挖掘。按照李的建议，只需使用
transform
。它工作得更好（至少在Chrome中）。我更喜欢你的解决方案！谢谢事实上，当导航系统崩溃时，这可能不起作用！无法单击按钮下拉菜单@Hardycore没有注意到这一点。不过很容易解决。我更新了密码笔。只需添加
.navbar toggle{z-index:1；}
“编辑”解决方案非常完美。我不得不使用这种方法，而不是更简单的绝对居中方法，因为它扰乱了我网站的谷歌分析，并扩展到整个页面。
<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
        </a>

.brand-centered {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.navbar-brand {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {

}

class="hidden-xs" style="visibility: hidden;"

<style>
.navbar-brand {
 margin: auto;
}
</style>

<!--HTML-->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand"  href="#">
  <img src="logo goes here" width="100" height="100" class="logo" alt="" 
loading="lazy">
</a>
</nav>