Vertically center in navbar

Hey guys!
I'm just having some issues right now with the website I am currently working on. I can vertically align using

margin-top:3%;

, but it doesn't seem to work on all different sized monitors. What is a way I can fix my code so that it works on all monitor sizes? Thanks!
HTML:

<!-- Navigation bar -->
<div class="nav-bar-container">

<div class="nav-navbar navbar" id="navbar-nav">

<div class="nav-links">
</div>
   <select class="select-campus">
  
    <option class="disabled" value="0" disabled selected>SELECT CAMPUS </option>
	<option value="1">North Campus</option>
    <option value="2">East Campus</option>
    <option value="3">West Campus</option>
	
  </select>
 <a href="home"><img class="logo" src="img/logo_white.png"></a>
 <a href="#" class="right">MEDIA</a>
   <a href="#" class="right">ABOUT US</a>
     <a href="#" class="right">CAMPUSES</a>
	    <a href="javascript:void(0);" class="icon right" onclick="menu">
    <i class="fa fa-bars"></i>
  </a>
 </div>

</div>

CSS:

/* Navbar base Structure of the navigation bar */
 .navbar{
     position:fixed;
     overflow:hidden;
     display:block;
     width:100%;
     font-family: 'Roboto', sans-serif;
     font-weight:600;
     background:transparent;
     padding-left:2%;
     z-index:999;
     transition: background 0.2s ease;
     box-sizing: border-box;
	 padding-bottom:2%;
}
 .navbar a{
     transition: color 0.2s ease;
     text-decoration:none;
     font-size:2vh;
}
 .left:hover{
     transition:color 0.2s ease-in;
}
 .left{
     color:white;
     float:left;
     margin-top:3%;
	 padding-bottom:2%;
     margin-right:15px;
}
 .right:hover{
     transition: color 0.2s ease;
     border-bottom:2px solid white;
}
 .right{
     color:white;
     float:right;
     margin-top:3%;
     margin-right:3%;
}
 .logo{
     margin-top:1.5%;
     width:15%;
     float:left;
}
 .nav-links{
     display:block;
     text-align:center;
     margin-left:auto;
     margin-right:auto;
}
A post by brwck

Like 0 Dislike

Hiya @brwck,

I'd recommend against using percentages to align your content (for margins or padding), it isn't particularly best practice. I'm assuming you want to align your menu items vertically centered, in that case using flex might be a lot easier. For example:

<nav>
  <a href="/1">Item 1</a>
  <a href="/2">Item 2</a>
  <a href="/3">Item 3</a>
</nav>

The above child items within the nav parent can be centered vertically with the following styling:

nav {
  display: flex;
  align-items: center;
  /* Some extra styling to see the full effect: */
  height: 100px;
  border: 1px solid red;
}

Hope this helps!

Like 0 Dislike

If you'd like to read up more on CSS Flex I recommend checking out MDN: https://developer.mozilla.org/en-US/doc … Box_Layout

W3Schools also has a much simpler explanation on the topic (although not as concise as MDN): https://www.w3schools.com/csS/css3_flexbox.asp

Like +1 Dislike