如何在引导程序中集中导航栏答案

【问题标题】：How to centralize navigation bar in bootstrap如何在引导程序中集中导航栏
【发布时间】：2020-05-26 18:36:22
【问题描述】：

我该怎么做才能用这样的网站集中导航栏。我在.navigation 的.navigation 属性中尝试了margin:0 auto; 在style.css 但它并没有改变一点。网址：http://theembazaar.com/demo/eforest/iconic/

【问题讨论】：

除了示例之外，您还有其他代码可以展示吗？

标签： css navigation

【解决方案1】：

没有你的任何代码sn-ps，这是最简单的例子（使用Bootstrap）。

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
  <nav class="nav justify-content-center">
    <a class="nav-link active" href="#">Active</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
  </nav>


  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>

【讨论】：

@kiavashkazerani 你说的是垂直和页面居中吗？
是的，我想要这个...我尝试了这段代码，但没有任何反应
您是否在 HTML 页面的适当位置添加了这些 <link> 和 <script> 标签？
是的...您可以查看我的网站代码吗？ theembazaar.com/demo/eforest/iconic 非常感谢您的帮助
您的 CSS 中似乎有一个 float: right; 附加到 ul (.header ul {...})。如果删除那行 CSS，文本会更靠近中心。但是，您将徽标包裹在 .col-md-3 中，这会将导航列表推过一点。