将导航栏与我的徽标对齐

Question

我正在尝试垂直对齐导航栏，使其位于徽标旁边的中心。我尝试只是在 bardiv 元素中添加一些边距顶部并且有效，但它在不同的屏幕上以不同的方式对齐，我需要一些一致的东西。我已经为此难倒了一段时间，如果有人能提供帮助，那就太好了。另外，如果我的任何CSS或HTML是不好的做法，也请告诉我！谢谢

这是它现在的样子

.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对齐导航栏。你可以像这样使用：

.bar{
    line-height:20%;
}