将导航栏与我的徽标对齐

Question

我正在尝试垂直对齐我的导航栏，以便它位于我的徽标旁边的中心。我试着在bar div元素中添加一些空白处，这很有效，但它在不同的屏幕上对齐方式不同，我需要一致的内容。我已经被这个问题困扰了一段时间了，如果有人能帮上忙，那就太好了。另外，如果我的CSS或HTML是不好的做法，也让我知道！谢谢

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

您可以使用flex作为徽标和导航栏的父级，并将align-items设置为center以实现您的效果

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

注意:这里的.parent类是徽标和导航栏的父类。这只是一个例子。改为使用您的类。删除为设置垂直对齐而指定的页边距。

Answer 2

您可以使用line-height to align您的导航栏。您可以使用like：

.bar{
    line-height:20%;
}