Align navbar with my logo

Question

I'm trying to align my navbar vertically so that it lays in the center next to my logo. I tried just adding some margin-top to the bar div element and that works, but it aligns it differently on different screens, I need something consistent. I've been stumped on this for a while, and if anyone can help that'd be great. Also if any of my CSS or HTML is bad practice let me know as well! Thank you

Here is what it looks like as of right now

 .row { height: 20%; } .logo { width: 20%; float: left; } .bar { display: inline-flex; padding: 20px; font-size: 14px; text-transform: uppercase; width: 600px; justify-content: center; } .bar-auth { display: inline-flex; padding: 20px; font-size: 14px; text-transform: uppercase; width: 300px; } .icon { padding: 15px; } .icon-auth { padding: 15px; } 

 <div class="row"> <a href="{{ url('index') }}"><img src={{ URL::asset( 'images/logo_opt.png')}} alt="Logo" class="logo"></a> <div class="bar"> <div class="icon icon-1"><a href="{{ url('index') }}">Home</a </div> <div class="icon dropdown"><a href="{{ url('whatsnew') }}">What's New</a> <div class="dropdown-content"> <a href="{{ url('whatsnew') }}">Calendar</a> <a href="{{ url('whatsnew') }}">Events</a> </div> </div> <div class="icon icon-3"><a href="{{ url('legacy') }}">Legacy</a></div> <div class="icon icon-3"><a href="{{ url('getinvolved') }}">Get Involved</a></div> <div class="icon icon-3"><a href="{{ url('gallery') }}">Gallery</a></div> <div class="icon icon-3"><a href="{{ url('contact') }}">Contact</a></div> <!-- Authentication Links --> </div> <div class="bar-auth"> @if (Auth::guest()) <div class="icon-auth"><a href="{{ url('/login') }}">Login</a></div> <div class="icon-auth"><a href="{{ url('/register') }}">Register</a></div> @else <div class="icon-auth"><a href="#">{{"Welcome, " . Auth::user()->first_name }}</a></div> <div class="icon-auth"> <a href="{{ url('/logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> Logout </a> <form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;"> {{ csrf_field() }} </form> </div> @endif </div> </div> 

Answer 1

You can use flex to parent of logo and navbar and set align-items to center to achieve your result

.parent {
  display: flex;
  align-items: center;
}

Note: the .parent class here is the parent of logo and navbar. this is just for example. use your class instead. remove the margin that you have given to set vertical alignment.

Answer 2

You can use line-height to align your navbar . You can use like :

.bar{
    line-height:20%;
}