将导航栏与我的徽标对齐

Question

我正在尝试垂直对齐导航栏，使其位于我的徽标旁边的中心。我尝试在 bar div 元素中添加一些 margin-top 并且可以工作，但是它在不同的屏幕上以不同的方式对齐，我需要一些一致的东西。我已经为此困扰了一段时间，如果有人可以提供帮助，那就太好了。另外，如果我的任何 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 类是 logo 和 navbar 的父类。这只是一个例子。改用你的班级。 删除您为设置垂直对齐而设置的边距。

Answer 2

您可以使用line-height 对齐您的导航栏。你可以像这样使用：

.bar{
    line-height:20%;
}