Question

我试图垂直对齐我的导航栏，使其位于我的徽标旁边的中心。我尝试在bar div元素中添加一些margin-top并且可以正常工作，但它在不同的屏幕上以不同的方式对齐，我需要一些一致的东西。我已经被困在这一段时间了，如果有人能帮助我做得好。如果我的CSS或HTML中的任何一个是不好的做法也让我知道！谢谢

Here is what it looks like as of right now

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您可以将flex用于徽标和导航栏的父级，并将align-items设置为center以获得结果

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

注意：此处的.parent课程是徽标和导航栏的父级。这只是例如。请改用你的班级。删除您设置垂直对齐的边距。

Answer 2

您可以使用line-height 对齐 导航栏。您可以使用：

.bar{
    line-height:20%;
}

将导航栏与我的徽标对齐

2 个答案: