How can I center an Icon in the navbar-toggler (Bootstrap 5)?-CodePudding

I created a navigation Bar using bootstrap in Angular, however I have encountered an issue when adding a user icon as shown in the picture below, that problem does not happen if I instead use a text as shown Below (My Account). How can I fix this and make sure the user icon is centered aligned just like the rest of the links in the navbar?

<nav >
  <div >
      <a href="/" >

        <img
        src="assets/images/myImage.png"
        alt="my-image"
        loading="lazy" 
        
      />

      </a>

      
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapsingNavbar3">
          <span ></span>
      </button>

      <div  id="collapsingNavbar3">
          <ul >
              <li >
                  <a  href="#">Home</a>
              </li>
              <li >
                  <a  href="#">Link</a>
              </li>
              <li >
                  <a  href="#">Link</a>
              </li>

              <li >
                <a  href="#">Link</a>
              </li>

          </ul>

          
          <ul >
          <!--    <li >
                  <a  href="#">Right</a>
              </li>
              <li >
                  <a  href="#">Right</a>
              </li>
            
               -->
              <li >
                  <a  href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                       
                    <img
                    src="assets/images/user.png"
                    alt="user-logo"
                    loading="lazy" 
                    
                  />

                    </a>
                  <ul  aria-labelledby="navbarScrollingDropdown">
                      <li><a  href="#">Login</a></li>
                      <li><a  href="#">Sign Up</a></li>
                    <!--  <li>
                          <hr >
                      </li>
                      <li><a  href="#">Item</a></li>

                      --> 
                  </ul>
              </li>
          </ul>
      </div>
  </div>
</nav>

CodePudding user response：

You can use the <center> tag to do this, but I would recommend using CSS instead.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<nav >
  <div >
      <a href="/" >

        <img
        src="https://i-need-to-go.to-sleep.xyz/r/hi.png"
        alt="my-image"
        loading="lazy" 
        
      />

      </a>

      
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapsingNavbar3">
          <span ></span>
      </button>

      <div  id="collapsingNavbar3">
          <ul >
              <li >
                  <a  href="#">Home</a>
              </li>
              <li >
                  <a  href="#">Link</a>
              </li>
              <li >
                  <a  href="#">Link</a>
              </li>

              <li >
                <a  href="#">Link</a>
              </li>

          </ul>

          
          <ul >
          <!--    <li >
                  <a  href="#">Right</a>
              </li>
              <li >
                  <a  href="#">Right</a>
              </li>
            
               -->
              <li >
                  <a  href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                       
                    <div style="text-align: center;"><img
                    src="https://i-need-to-go.to-sleep.xyz/r/hi.png"
                    alt="user-logo"
                    loading="lazy" 
                    
                    
                    style="border: 1px solid lime; /*remove*/"
                  /></div>

                    </a>
                  <ul  aria-labelledby="navbarScrollingDropdown">
                      <li><a  href="#">Login</a></li>
                      <li><a  href="#">Sign Up</a></li>
                    <!--  <li>
                          <hr >
                      </li>
                      <li><a  href="#">Item</a></li>

                      --> 
                  </ul>
              </li>
          </ul>
      </div>
  </div>
</nav>

The center tag has been deprecated, and is not supported by some browsers, so you should probably use the CSS option above instead of <center>.

You can also remove that green border, I just put it there to show that it was actually centered.

CodePudding user response：

Here you go...

The solution that @ethry suggested is not the best one (even though it works). Why using CSS if this can be done with Bootstrap? You just need to add d-flex justify-content-center to the nav-item.

See the snippet below.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<nav >
  <div >
    <a href="/" >
      <img src="assets/images/myImage.png" alt="my-image" loading="lazy"  />
    </a>

    <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapsingNavbar3">
      <span ></span>
    </button>

    <div  id="collapsingNavbar3">
      <ul >
        <li >
          <a  href="#">Home</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>

        <li >
          <a  href="#">Link</a>
        </li>
      </ul>

      <ul >
        <!--  <li >
                  <a  href="#">Right</a>
              </li>
              <li >
                  <a  href="#">Right</a>
              </li>
         -->
        <li >
          <a  href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            <img src="assets/images/user.png" alt="user-logo" loading="lazy"  />
          </a>
          <ul  aria-labelledby="navbarScrollingDropdown">
            <li><a  href="#">Login</a></li>
            <li><a  href="#">Sign Up</a></li>
            <!--  <li>
                      <hr >
                  </li>
                  <li>
                      <a  href="#">Item</a>
                  </li>
            -->
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>