I'm using bootstrap navbar and I inserted an image to the navbar branding but due to the size it messes up the alignment. I want the text that goes with it to be aligned with the middle of it, but I don't know how to get the other button text to be aligned with it too.
This is what the output looks like
<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 alignment on the navigation items but no matter what I do it doesn't change anything, this is my first time using bootstrap and my html knowledge is limited so I have no idea what to do Do:(< /p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Not sure what's wrong with your implementation. I tried wrapping your snippet with a navigation container as mentioned in the bootstrap documentation and it looked good:
a.nav-item { color: white; } a.nav-item:hover { color: yellow; }Maybe you're just missing that wrapper? Or maybe you didn't include bootstrap's styles in the static styles of your HTML file?
You can try using the in bootstrap on all
<a>tags on the parent element as well as thenavbar-brand<a>tagd-flexalign-items-centerclass, as shown below. This will center the element vertically.