如何使导航栏中的组件居中[重复]

Posted 2023-03-05

【中文标题】如何使导航栏中的组件居中[重复]

【英文标题】：How to center the components inside navbar [duplicate]

【发布时间】：2021-04-08 21:01:35

【问题描述】：

我有一个这样的导航栏： https://i.ibb.co/28MgmFt/navbar2.jpg

我正在尝试将导航栏中的组件对齐，如下所示：

使用此代码 html：

 <!-- Navbar -->
 <nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar">
  <div style="text-align: center; list-style: inside;" class="container-fluid">

    <!-- Brand -->
    <a class="navbar-brand" href="index.html">
      <img src="assets/img/logo.png"  >
    </a>

    <!-- Collapse -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Links -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <!-- Left -->
      <ul class="navbar-nav mr-auto">

        <li class="nav-item">
          <a style="font-family: 'Tajawal', sans-serif; font-size:18px; color: #0f3832; font-weight: bold;" class="nav-link border-bottom border-dark rounded-left" href="#howtocon" target="_blank">طريقة المشاركة</a>
        </li>
        &nbsp;
        <li class="nav-item">
          <a style="font-family: 'Tajawal', sans-serif; font-size:18px; color: #0f3832; font-weight: bold;" class="nav-link border-bottom border-dark" href="#branchess" target="_blank">فروع الجائزة</a>
        </li>
        &nbsp;
        <li class="nav-item">
          <a style="font-family: 'Tajawal', sans-serif; font-size:18px; color: #0f3832; font-weight: bold;" class="nav-link border-bottom border-dark" href="#about" target="_blank">عن الجائزة</a>
        </li>
        &nbsp;
        <li class="nav-item">
          <a style="font-family: 'Tajawal', sans-serif; font-size:18px; color: #0f3832; font-weight: bold;" class="nav-link border-bottom border-dark rounded-right" href="#headerstart">الرئيسية
            <span class="sr-only">(current)</span>
          </a>
        </li>
      </ul>

      <!-- Right -->
      <ul class="navbar-nav nav-flex-icons">

        <li class="nav-item">
          <a style="background-color: #0f3832;font-family: 'Tajawal', sans-serif; font-size:18px; color: #fff; font-weight: bold;" href="/login" class="nav-link border border-dark rounded"
            >
            <i class="mr-2"></i> تسجيل الدخول
          </a>
        </li>
&nbsp;            <li class="nav-item">
          <a style="background-color: #0f3832;font-family: 'Tajawal', sans-serif; font-size:18px; color: #fff; font-weight: bold;" href="/register" class="nav-link border border-dark rounded"
            >
            <i class="mr-2"></i>تسجيل جديد
          </a>
        </li>
      </ul>

    </div>


  </div>
</nav>
<!-- Navbar -->

我想变成这样： https://i.ibb.co/1ZbKrtC/navbar1.jpg

我尝试了很多方法来做到这一点，但我做不到

有什么帮助吗？

【参考方案1】：

只需将 ul 的边距从 ml-auto 更改为 mx-auto 代码在这里：

<ul class="navbar-nav mx-auto">

【参考方案2】：

你应该试试这个 CSS 代码：

.navbar-nav.mr-auto 
  margin-left:auto;
  margin-right:auto;