Question

我正在尝试将li标签垂直对齐垂直导航栏，而不使用行高或填充。

这是我的代码。

  <header>
  <nav class="navbar navbar-default nav-main">
    <div class="container-fluid">
<!-- small size devices collapse button -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-menu-expand" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand nav-brand" href="#"><img src="asset/images/main-logo.png" alt=""></a>
      </div> <!--end of navbar-header   -->

<!-- medium size devices menu -->
      <div class="collapse navbar-collapse" id="mobile-menu-expand">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">work</a></li>
          <li><a href="#">services</a></li>
          <li><a href="#">About</a></li>
          <li><button type="button" class="btn btn-default navbar-btn">contact</button></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
</header>

Answer 1

只需处理css中的lineheight

.navbar li
{
    lineheight:20px;
}

根据您的身高增加或减少线高。

如何在导航栏上对齐导航li项垂直中心，而不使用行高或填充

1 个答案: