Html 引导导航栏链接赢得'；t中心

一个多星期以来，我一直在尝试将引导导航栏上的链接/选项卡放在中心位置，这让我头疼不已。我已经在这里经历了所有类似的问题，但绝对没有任何效果。我在想，我在这条路线上的某个地方把规则翻了一番，或者实际上没有瞄准正确的东西

这是Dreamweaver上的基本引导导航条片段。我已经设法定制了颜色/字体/大小，但就是不能让该死的东西坐在中间。

.navbar.navbar-default{
背景色：#B3C5D7；
背景附件：固定；
位置：固定；
宽度：100%；
边界半径：0px；
浮动：无；
文本对齐：居中；
}
.nav.navbar-nav{
字号：x大号；
宽度：100%；
显示：内联块；
}

切换导航

尝试添加这些类

CSS

---

希望这对您有所帮助。

您可以使用Flexbox来实现这一点：

.navbar {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
}

---

基本上使用

float:left

在

navbar头中引导
li
和
li
这样父div不接受包含在下面代码段或check fiddle链接中的中心对齐或边距自动更新css部分

在第一个选项中，您将使嵌套类仔细查看css和html


在第二个选项中，您将只得到css更改，所以请仔细检查css

第二个选择是进入中心


更新css部分，我正在使用
inline flex
获取中心


.navbar.navbar-default{
背景色：#B3C5D7；
背景附件：固定；
位置：固定；
宽度：100%；
边界半径：0px；
浮动：无；
文本对齐：居中；
}
.nav.navbar-nav{
字号：x大号；
宽度：100%；
显示：内联块；
}
/*添加此css部件*/
.导航栏标题{
浮动：无；/*添加此*/
}
.navbar nav li{
显示：内联flex；/*添加此*/
浮动：无；/*添加此*/
}

切换导航







添加一张描述您实际需求的图片作为您工作的一部分。在代码中添加引导/jQuery链接后，链接看起来居中（开关位于右上角）。你到底想要什么？我偶然解决了这个问题吗？或者它在你这边的表现不同吗？这就是我看到的：谢谢你检查Nisse，我应该澄清一下。切换菜单工作正常，可以放在我需要的地方。。这实际上是默认的/桌面菜单，我无法获得指向中心的链接：（你可以向上投票，这样它将有助于其他社区成员。）
.navbar {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
}