Difficulties in centering the Navbar UL items vertically

First of all, I'm a newbie on front-end. Sorry for any inconveniences.

I'm having some difficulties centering the Navbar UL vertically. For example, notice that the logo is centered vertically correctly. However, the UL items are aligned slightly above the central vertical axis.

Snippet link: https://codepen.io/samuluizzz/pen/YzeyNgr

HTML:

    <nav class="navbar">
        <a href="index.html"><img style="border-style: solid; border-width: 1px black; border-radius: 50%" src="img/logo-navbar.png" height="60" width="60"></a>
        <div class="menu">
            <ul class="list">
                <li><a href="#info">info</a></li>
                <li><a href="#aboutus">about us</a></li>
                <li><a href="#share">share</a></li>
                <li><button type="button" class="btn btn-dark"><a href="#quiz">quiz</a></button></li>
            </ul>
        </div>
        <button class="btn" id="toggler"><i class="fa-solid fa-bars"></i></button>
    </nav>

CSS:

 ​.​navbar​ { 
 ​    ​display​:​ flex; 
 ​    ​flex-wrap​:​ wrap; 
 ​    ​align-items​:​ center; 
 ​    ​justify-content​:​ space-between; 
 ​    ​background-color​:​ white; 
 ​    ​padding​:​ ​15​px​; 
 ​    ​border-bottom​:​ dotted ​1​px​ ​rgba​(​0​,​ ​0​,​ ​0​,​ ​0.25​); 
 ​} 
 ​.​navbar​ .​logo​ { 
 ​    ​margin-right​:​ ​50​px​; 
 ​} 
 ​.​navbar​ .​list​{ 
 ​    ​display​:​ flex; 
 ​    ​align-items​:​ center; 
 ​    ​list-style​:​ none; 
 ​    ​gap​:​ ​25​px​; 
 ​} 
 ​.​navbar​ ​a​{ 
 ​    ​text-decoration​:​ none; 
 ​    ​color​:​ inherit; 
 ​} 
 ​.​navbar​ ​a​:​hover​{ 
 ​    ​color​:​slategray; 
 ​} 
 ​#​toggler​, 
 ​.​navbar​ ​i​ { 
 ​    ​display​:​ none; 
 ​}

1 answer

  • answered 2022-05-05 20:59 Mahdiar Mransouri

    you are using a library or something that has a reboot file

    basically these files are to fix unwanted default values but your reboot is doing it weird, it's adding a margin-bottom to your ul elements which is causing your problem

    this is it

    ul{
        margin-bottom: 0;
    }
    

    OR

    .list{
        margin-bottom: 0;
    }
    

    Will fix it

    ====== UPDATE =======

    I've tested your code inside jsFiddle and it does not have any problem!

    https://jsfiddle.net/mahdiar_mansouri/wj2uf49y/3/

    here you can check it out yourself, so test it in your own browser and inspect your ul.list if it had that margin, remove it and let me know if otherwise

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum