如何使引导底部导航栏居中答案

【问题标题】：how to centre bootsrap bottom navbar如何使引导底部导航栏居中
【发布时间】：2021-01-17 16:08:18
【问题描述】：

我有两个导航栏，我一直试图将第二个导航栏图标居中，但它不起作用。当我左右对齐它时它可以工作，但一旦我做中心它根本不起作用。我是否错过了代码的某些部分或犯了错误，因此它不起作用。如果有人可以提供帮助，我将不胜感激。

这是我的第二个导航栏的 CSS 代码：

.navbartwo {
overflow: hidden;

bottom: 0;
width: 100%;
}

.navbartwo {
background-image: url(nav.png)
}


.navbartwo a {
float: centre;
display: inline-grid;
color: #f2f2f2;
text-align: center;
padding: 14px 13px;
text-decoration: none;
font-size: 15px;
display: flex;
align-items: center;
}



/* links on hover */
 .navbartwo a:hover {
 background-color: #ddd;
 color: black;
 }

 /*colour to the active/current link */
  .navbartwo a.active {
   color: #ebeef7;
    }


  .navbartwo.navbar-nav {
   display: inline-block;
   float: none;
    vertical-align: top;
    }

   .navbartwo .navbar-collapse {
   text-align: center;
   }

这是 HTML：

<div class="navbartwo">
<a href="#Dashboard">
    <svg id="try" xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="white" class="bi bi-house-door" viewBox="0 0 16 16">
        <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z" />
    </svg>



    <a href="#Map"><svg id="try" xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="white" class="bi bi-geo-alt" viewBox="0 0 16 16">
            <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z" />
            <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
        </svg></a>

    <a href="#Analysis"><svg id="try" xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="white" class="bi bi-bar-chart-line" viewBox="0 0 16 16">
            <path d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z" />
        </svg></a>

    </svg></a>

<a href="#Community"><svg id="try" xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="white" class="bi bi-people" viewBox="0 0 16 16">
        <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" />
    </svg></a>

【问题讨论】：

没有float: centre;这样的属性/值
这样？ - ibb.co/B6894R2

标签： html css bootstrap-4 navbar

【解决方案1】：

我已着手整理此代码 sn-p 供您查看和使用，如果这可以解决您的问题。我强烈建议避免在单独的块中使用重复的类规则，例如 .navbartwo 类被重复多次，我加入了所有规则并添加了一些新规则以使其正常工作。

注意： 您可以删除 .navbartwo 类的背景颜色规则。由于手头没有当前的导航栏背景图像，因此我将其放置以可视化图标。

我当然希望这对您的请求有所帮助。祝你编码愉快，继续努力，到目前为止你做得很好！

body {
    padding: 0;
    margin: 0;
}

.navbartwo {
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    display: flex;
    align-items: between;
    background-color: #333;
    background-image: url("nav.png")
}

.navbartwo a {
    color: #f2f2f2;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 15px;
    width: 200px;
    height: auto;
}


/* links on hover */

.navbartwo a:hover {
    background-color: #ddd;
    color: black;
}


/*colour to the active/current link */

.navbartwo a.active {
    color: #ebeef7;
}

.navbartwo.navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
}

.navbartwo .navbar-collapse {
    text-align: center;
}

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="description" content="">
      <meta name="author" content="">
      <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js"
         integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>
      <title>DEMO FILE</title>
      <!-- Bootstrap core CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   </head>
   <body>
      <main role="main" class="container">
         <div class="container">
            <div class="navbartwo">
               <a href="#Dashboard">
                  <svg id="try" xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="white" class="bi bi-house-door" viewBox="0 0 16 16">
                     <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z" />
                  </svg>
               <a href="#Map">
                  <svg id="try" xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="white" class="bi bi-geo-alt" viewBox="0 0 16 16">
                     <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z" />
                     <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                  </svg>
               </a>
               <a href="#Analysis">
                  <svg id="try" xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="white" class="bi bi-bar-chart-line" viewBox="0 0 16 16">
                     <path d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z" />
                  </svg>
               </a>
               </svg></a>
               <a href="#Community">
                  <svg id="try" xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="white" class="bi bi-people" viewBox="0 0 16 16">
                     <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" />
                  </svg>
               </a>
            </div>
         </div>
      </main>
      <!-- /.container -->
      <!-- Bootstrap core JavaScript
         ================================================== -->
      <!-- Placed at the end of the document so the pages load faster -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
         "></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
   </body>
</html>

【讨论】：

【解决方案2】：

浮动：中心不存在，只能向右或向左浮动。

如果你想将'a'标签放在导航栏的中心，你可以在你的 navbartwo 类中添加这个：

.navbartwo {
  display: flex;
  justify-content: center;
}

否则，如果您只想将每个“a”标签的文本居中添加到 a 标签中，如下所示：

.navbartwo a{
  display: flex;
  justify-content: center;
}

【讨论】：