html - h1 和 nav 元素拒绝正确排列

Question

我已经查看了几个与此相关的问题；然而，它们似乎都没有解决或解决这个问题。

本质上发生的是 h1 和 nav 元素最终并排放置，但没有正确对齐。我已经在每个上尝试了多个显示和 float 设置，但都没有用。

CSS 本身比较干净，也许是 flex 没有正常工作或者我没有正确使用它？我不确定是什么导致了这里的问题，非常感谢您的帮助!

 /* Mobile CSS */
    #navbar h1 {
      display: block;
      padding-top: 1.4rem;
      text-align: center;
      font-weight: 400;
    }

    #hbmenu {
      display: block;
      position:absolute; top:1.8rem; left:2rem;
      background-color: transparent;
      border: none;
    }

    .iconbar {
      display: block;
      margin-top: 5px;
      height: 3px;
      border-radius: 3px;
      width: 30px;
      background-color: #888;
    }

    #hbmenu:hover .iconbar {
      background-color: #fff
    }

    #navbar > nav {
      display: flex;
      flex-direction: column;
      background-color: white;
      transform: 300ms all ease;
    }

    #navbar > nav > ul {
      margin: 0 auto;
      flex: 1;
      text-align: center;
      list-style-type: none;
     }

    #navbar > nav > ul > li {
      border-bottom: 1px solid rgba(51,51,51,0.4);
    }

    #navbar > nav > ul > li > a {/*border bottom none?*/
     display: block;
     padding: 1.2rem 0;
     text-decoration: none;
     transition: 250ms all ease;
    }

    /* Medium screens or Desktop screens */
    @media all and (min-width: 600px) {

      #hbmenu {
       display: none;
      }

      #navbar h1 {
       display: inline-block;
       padding-left: 2rem;
      }

      #navbar > nav {
       display: inline-block;
       padding-top: 2.1rem;
       background-color: #333333;
      }

      #navbar > nav > ul {
       padding-left: 1.8rem;
      }

      #navbar > nav > ul > li {
       display: inline-block;
      }

      #navbar > nav > ul > li > a {
         padding: 0 0.5rem;
         margin: 0 0.5rem;
         color: #9D9D9D;
         border-top: 1.5px solid transparent;
         border-bottom: 1.5px solid transparent;
         transition: 0.5s;
      }

      #navbar > nav > ul > li > a:hover {
         border-bottom: 1.5px solid #fff;
         color: #fff;
         transition: 0.5s;
      }

    }

    /* Color & Font Stuff */
    #navbar > nav > ul > li > a {
      font-family: "Helvetica Neue";
      font-weight: 600;
    }

    .highlight {
     color: #9D9D9D;
     transition: 0.5s;
    }

    .highlight:hover {
      color: #ffffff;
      transition: 0.5s;
    }

<header>
     <div id="navbar">
      <button type="button" id="hbmenu">
      <span class="iconbar"></span>
      <span class="iconbar"></span>
      <span class="iconbar"></span>
     </button>
     <h1>
      <span class="highlight">Gatsby</span>
     </h1>
     <nav>
      <ul>
       <li>
        <a href="#">Home</a>
       </li>
       <li>
        <a href="#">Test</a>
       </li>
       <li>
        <a href="#">About</a>
       </li>
      </ul>
     </nav>
    </div>
   </header>
   

删除 h1 元素允许我正确地向 nav 元素的顶部添加填充。同时，同时拥有两者只允许我正确填充 h1。我确信填充也不是垂直居中的最佳方式，但问题仍然存在。

更新:

misalignment picture

我迅速标记了屏幕截图，希望能澄清问题。底部的红线显示了文本当前的排列方式。顶部的红线演示了 li 元素应该如何垂直居中。

h1, nav element views

正如这表明的那样，也许更大的问题是它当前的设置是如何作为元素的，如果您愿意的话，它不会“捕捉”。

Answer 1

display: inline-block; 元素可以使用vertical-align: middle;垂直居中对齐，只需将它添加到h1 和 nav

 /* Mobile CSS */
    #navbar h1 {
      display: block;
      text-align: center;
      font-weight: 400;
    }

    #hbmenu {
      display: block;
      position:absolute; top:1.8rem; left:2rem;
      background-color: transparent;
      border: none;
    }

    .iconbar {
      display: block;
      margin-top: 5px;
      height: 3px;
      border-radius: 3px;
      width: 30px;
      background-color: #888;
    }

    #hbmenu:hover .iconbar {
      background-color: #fff
    }

    #navbar > nav {
      display: flex;
      flex-direction: column;
      background-color: white;
      transform: 300ms all ease;
    }

    #navbar > nav > ul {
      margin: 0 auto;
      flex: 1;
      text-align: center;
      list-style-type: none;
     }

    #navbar > nav > ul > li {
      border-bottom: 1px solid rgba(51,51,51,0.4);
    }

    #navbar > nav > ul > li > a {/*border bottom none?*/
     display: block;
     padding: 1.2rem 0;
     text-decoration: none;
     transition: 250ms all ease;
    }

    /* Medium screens or Desktop screens */
    @media all and (min-width: 600px) {

      #hbmenu {
       display: none;
      }

      #navbar h1 {
       display: inline-block;
       padding-left: 2rem;
       vertical-align: middle;
      }

      #navbar > nav {
       display: inline-block;
       vertical-align: middle;
       background-color: #333333;
      }

      #navbar > nav > ul {
       padding-left: 1.8rem;
      }

      #navbar > nav > ul > li {
       float: left;
      }

      #navbar > nav > ul > li > a {
         padding: 0 0.5rem;
         margin: 0 0.5rem;
         color: #9D9D9D;
         border-top: 1.5px solid transparent;
         border-bottom: 1.5px solid transparent;
         transition: 0.5s;
      }

      #navbar > nav > ul > li > a:hover {
         border-bottom: 1.5px solid #fff;
         color: #fff;
         transition: 0.5s;
      }

    }

    /* Color & Font Stuff */
    #navbar > nav > ul > li > a {
      font-family: "Helvetica Neue";
      font-weight: 600;
    }

    .highlight {
     color: #9D9D9D;
     transition: 0.5s;
    }

    .highlight:hover {
      color: #ffffff;
      transition: 0.5s;
    }

<header>
     <div id="navbar">
      <button type="button" id="hbmenu">
      <span class="iconbar"></span>
      <span class="iconbar"></span>
      <span class="iconbar"></span>
     </button>
     <h1>
      <span class="highlight">Gatsby</span>
     </h1>
     <nav>
      <ul>
       <li>
        <a href="#">Home</a>
       </li>
       <li>
        <a href="#">Test</a>
       </li>
       <li>
        <a href="#">About</a>
       </li>
      </ul>
     </nav>
    </div>
   </header>