我在Angular中使用bootstrap创建了一个导航栏，但是在添加如下图所示的用户图标时遇到了一个问题，如果我使用如下图所示的文本（我的帐户），则不会出现这个问题。如何解决这个问题，并确保用户图标与导航栏中的其他链接一样居中对齐？
<div class="container"> <a href="/" class="navbar-brand d-flex w-50 me-auto"> <img src="assets/images/myImage.png" alt="my-image" loading="lazy" class="logo" /> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsingNavbar3"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse w-100" id="collapsingNavbar3"> <ul class="navbar-nav w-100 justify-content-center"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> <ul class="nav navbar-nav ms-auto w-100 justify-content-end"> <!-- <li class="nav-item"> <a class="nav-link" href="#">Right</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Right</a> </li> --> <li class="nav-item dropdown"> <a class="nav-link" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <img src="assets/images/user.png" alt="user-logo" loading="lazy" class="logo" /> </a> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarScrollingDropdown"> <li><a class="dropdown-item" href="#">Login</a></li> <li><a class="dropdown-item" href="#">Sign Up</a></li> <!-- <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Item</a></li> --> </ul> </li> </ul> </div> </div>
