Html 将引导li元素放在响应页面的中心

我试图让导航栏中的所有元素始终显示在导航栏的中心，从而显示在页面的中心，但它们仍然向左移动。当我移除我的引导库时，它们是居中的，所以在某个地方存在冲突，但我不确定是什么，我想使用引导库

我的自定义CSS也链接在bootstrap之后

任何伟大的成就都将受到极大的赞赏

HTML:

<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="container">
            <ul class="nav navbar-nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html">About</a></li>
            </ul>
        </div>
    </div>
</div>

.navbar {
    margin-bottom: 0px;
    border-radius: 0px;
}

.nav {
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}

.nav  li {
    display:inline;
}

.nav a {
    display:inline-block;
    padding:10px;
}

.navbar-default {
    background: #900000;
    border: none;
}

---

以下是一个可能的解决方案：

HTML:

---

小提琴：这里有一个可能的解决方案：

HTML:

---

Fiddle:

默认情况下，引导的css浮动到左侧

。导航栏导航。因此：

@media (min-width: 768px)
.navbar-nav {
    float: left;
    margin: 0;
}

您需要覆盖此属性。我建议给出一个独特的类，比如.myNav，然后重置这个浮动。同时添加
显示：内联块

<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="container">
            <ul class="nav navbar-nav myNav">
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html">About</a></li>
            </ul>
        </div>
    </div>
</div>

最后，将文本align:center添加到包装navbar元素中，以使其中的内容居中

.navbar {
    margin-bottom: 0px;
    border-radius: 0px;
  text-align:center;
}

默认情况下，引导的css会向左浮动
.navbar nav
。因此：

@media (min-width: 768px)
.navbar-nav {
    float: left;
    margin: 0;
}

您需要覆盖此属性。我建议给出一个独特的类，比如.myNav，然后重置这个浮动。同时添加
显示：内联块

<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="container">
            <ul class="nav navbar-nav myNav">
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html">About</a></li>
            </ul>
        </div>
    </div>
</div>

最后，将文本align:center添加到包装navbar元素中，以使其中的内容居中

.navbar {
    margin-bottom: 0px;
    border-radius: 0px;
  text-align:center;
}

使用嵌套的.container流体和.container类有什么特别的用途吗？可能没有，除了它允许它与jumbotron对齐，而不是与页面边缘对齐之外。我接了一个老项目，这就是他们在那里的原因。只要元素在页面上居中，就可以删除它们。@markoffden：通过自动边距居中仅适用于块元素。如果要将
内联块
元素居中，可以通过父元素上的
文本对齐
来实现。使用嵌套的.container流体和.container类有什么特殊目的吗？可能没有，除了允许它与jumbotron对齐而不是与页面边缘对齐之外。我接了一个老项目，这就是他们在那里的原因。只要元素在页面上居中，就可以删除它们。@markoffden：通过自动边距居中仅适用于块元素。如果您想将
内联块
元素居中，可以通过父元素上的
文本对齐
来实现。这正是我要寻找的，我认为我沿着右边的线，只是不确定向左拉的确切位置。谢谢你的详细回答。我很高兴！建议你，一定要检查浏览器的开发者工具来检查CSS。你会发现这真的很有用，正是我想要的，虽然我沿着正确的路线，只是不确定向左拉到底发生在哪里。谢谢你的详细回答。我很高兴！建议你，一定要检查浏览器的开发者工具来检查CSS。你会发现这真的很有帮助