我如何在Bootstrap 4导航栏中垂直居中放置图像

Question

EDITED: Updated the code snippet

I'm using Bootstrap4 to build an app's frontend and i'm trying to achieve a navbar effect similar to the one present in AdminLTE dashboard package, where the user's name and photo are side by side in the top navbar but i can't get the items to vertically align correctly since BS4 uses relative dimensions.

I've tried playing around with utility classes but can't seem to figure out how to properly align the elements. Here's some of the markup:

 <nav class="navbar sticky-top navbar-expand-md navbar-dark"> <div class="navbar-collapse collapse"> <ul class="navbar-nav mr-auto"> <li class="user nav-item"> <a class="nav-link" href="#"> Link 1 </a> </li> <li class="user nav-item"> <a class="nav-link" href="#"> Link 2 </a> </li> <li class="user nav-item"> <a class="nav-link" href="#"> Link 3 </a> </li> </ul> <ul class="navbar-nav"> <li class="user nav-item"> <a class="nav-link" href="#"> Link 4 </a> </li> <li class="user nav-item"> <a class="nav-link" href="#"> Link 5 </a> </li> <li class="user nav-item dropdown"> <a class="nav-link" href="#"> <img src="user.jpg" class="rounded-circle"> Username </a> </li> </ul> </div> </nav> 

Thanks in advance.

Answer 1

you can achieve by using flex support.

.navbar-nav{
  display:flex;
  align-items:center;
}