I am using bootstraps navigation bar and I inserted an image to the navbar brand yet because of the size it messes up the alignment. I want the text that goes along with it to line up with the middle of it like it is, yet I can’t figure out how to get the other button text to line up with it as well.
This is what it looks like Output
<a class ="navbar-brand" id="home" href="/">
<img src="https://cdn.discordapp.com/attachments/901496285759168554/1045812932535128084/jeffersonlogo.webp" width="40" height="60" class="d-inline-block align-middle" alt="">
Jefferson Robotics</a>
<a class="nav-item nav-link" id="water" href="/underwater">Underwater</a>
<a class="nav-item nav-link" id="sky" href="/aerial">Aerial</a>
<a class="nav-item nav-link" id="earth" href="/land">Land</a>
I tried using alignments on the nav-items but it doesn’t change anything no matter what I do, this is my first time using bootstrap and I have limited html knowledge so I am quite lost on what to do 🙁
>Solution :
You can try using d-flex align-items-center classes from bootstrap on both parent element to all the <a> tags and also on the navbar-brand <a> tag like below. This will center the elements vertically.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex align-items-center">
<a class="navbar-brand d-flex align-items-center" id="home" href="/">
<img src="https://cdn.discordapp.com/attachments/901496285759168554/1045812932535128084/jeffersonlogo.webp" width="40" height="60" class="d-inline-block align-middle" alt=""> Jefferson Robotics</a>
<a class="nav-item nav-link" id="water" href="/underwater">Underwater</a>
<a class="nav-item nav-link" id="sky" href="/aerial">Aerial</a>
<a class="nav-item nav-link" id="earth" href="/land">Land</a>
</div>