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>
P粉7970046442024-03-29 11:06:33
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;
}
sssccc [email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
Maybe you're just missing that wrapper? Or maybe you didn't include bootstrap's styles in the static styles of your HTML file?
P粉1292756582024-03-29 10:36:19
You can try using the in bootstrap on all <a> tags on the parent element as well as the navbar-brand <a> tag d-flexalign-items-center class, as shown below. This will center the element vertically.
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
Jefferson Robotics