导航内的垂直内容中心

 收藏

I have toolbar and I want to center it's inner content, I tried with margin: auto; display: inline-block; vertical-align: middle; but it doesn't worked, here my code:

<div class="toolbar" role="banner">
  <nav style=" margin: auto; display: inline-block; vertical-align: middle;">
    <a style="color: red;"> login &nbsp;</a>
    <a style="color: red;">register</a>
  </nav>
</div>
.toolbar {
    height: 60px;
    margin: -8px;
    align-items: center;
    background-color: blue;
    color: white;
    font-weight: 600;
  }

Fiddle

回复
  • 我认为使用flexbox将是更好,更轻松的选择。请查看该代码段,并告诉我该代码是否有效,以寻求进一步的帮助。

    .toolbar {
        height: 60px;
        margin: -8px;
        display:flex;
        justify-content: center;
        align-items: center;
        background-color: blue;
        color: white;
        font-weight: 600;
      }
    <div class="toolbar" role="banner">
      <nav class="navbar">
        <a style="color: red;"> login &nbsp;</a>
        <a style="color: red;">register</a>
      </nav>
    </div>

    希望这对您有所帮助!

  • .toolbar {
      height: 60px;
      margin: -8px;
      /* display: flex; */
      align-items: center;
      background-color: #1976d2;
      color: white;
      font-weight: 600;
    }
    
    .toolbar nav {
      text-align: center;
    }
    
    .toolbar nav>a {
      padding: 0 10px;
      /*the magic is here*/
      display: inline-block;
      line-height: 60px;
    }
    <div class="toolbar" role="banner">
      <nav>
        <a routerLink="/login">login</a>
        <a routerLink="/register">register</a>
      </nav>
    </div>