problem when using width and height properties in css, the icon is pushed upwards?

Question

I am newbie with html css and here is my problem, I coded a very simple html css and made an image , you can said it an icon, if you want.

My problem is, it is pushed upwards, not in the middle as I wished.

Here is my code and my image for you to reference :

#nav {
display: inline-block;
}
#nav>li {
display: inline-block;
}
#nav li {
position: relative;
}
#nav>li>a {
color: #fff;
text-transform: uppercase;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
.nav_bars-btn {
width: 28px;
height: 28px;
color: #fff;
display: inline-block;
/*display: none;*/
}

<div id="header">
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#band">Bane</a></li>
            <li><a href="#tour">Tour</a></li>
            <li><a href="#contact">Contact</a></li>
            <li>
                <a href="">More
                <i class="nav-arrow-down ti-arrow-circle-down"></i>    
                </a>
                <ul class="subnav">
                    <li><a href="#">Merchandise</a></li>
                    <li><a href="#">Extras</a></li>
                    <li><a href="#">Media</a></li>
                </ul>
            </li>
            <div class="nav_bars-btn">
                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
            </div>
        </ul>
        <div class="search-btn">
            <i class="search-icon ti-search"></i>
        </div>
    </div>

And when I used the code padding-top: 10px; for example at the .nav_bars-btn to css for this button, it push down all the HOME, BANE, TOUR, CONTACT, MORE bar, I do not know why it happen ?

Could you please help me how to make the button to be in the middle and tell me why when I used the code padding-top: 10px; at the .nav_bars-btn it pushed down all the "nav" bar. Thank you very much for your time.

Answer 1

I think the problem is that the size of the "more button" and the header links are different and so they push each other when you try to position them, the solution would be to move the more button out of the unordered list and then position the more button

Answer 2

inn css, try flexbox,

#nav{
display: flex;
justify-content: center;
align-items: center;
}

Answer 3

The button is a part of the unordered list so when you adjust the padding for the button on the far right, you are also adjusting the padding for the unordered list and the elements it contains.

One solution would be to move the button outside of the list and then adjust its padding. Another solution would be to vertically center all the elements in the list:

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div id="header">
 <div class="vertical-center">
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#band">Bane</a></li>
            <li><a href="#tour">Tour</a></li>
            <li><a href="#contact">Contact</a></li>
            <li>
                <a href="">More
                <i class="nav-arrow-down ti-arrow-circle-down"></i>    
                </a>
                <ul class="subnav">
                    <li><a href="#">Merchandise</a></li>
                    <li><a href="#">Extras</a></li>
                    <li><a href="#">Media</a></li>
                </ul>
            </li>
            <div class="nav_bars-btn">
                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
            </div>
        </ul>
 </div>
        <div class="search-btn">
            <i class="search-icon ti-search"></i>
        </div>
    </div>