html - flex元素在导航栏中未垂直对齐

This question already has an answer here:

Proper use of flex properties when nesting flex containers
（1个答案）
去年关门了。
我试图让我的两个ULs对齐中心垂直（横轴）。我是在Sass做的，我可能会感到困惑，因为有太多的筑巢。我所说的ul是nav的直接子项，即“nav主列表”和“nav社交列表”。
这是我的HTML代码：

          * {
      margin: 0;
      padding: 0;
    }

    body {
      background: #f3c6c6;
    }

    ul {
      list-style-type: none;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    nav {
      background-color: #d42e2e;
      height: 3rem;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-items: center;
      justify-content: center;
      color: whitesmoke;
    }
    nav ul {
      height: 100%;
      width: 50%;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 0 2rem;
    }
    nav ul li {
      height: 100%;
      margin: 0;
      margin-top: auto;
      padding: 0 0.5rem;
    }
    nav ul li:hover {
      color: #d42e2e;
      background: whitesmoke;
    }
    nav ul li:hover ul {
      margin: 1rem 0;
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    nav ul li:hover ul li {
      width: 100%;
      background: #d42e2e;
      color: whitesmoke;
    }
    nav ul li:hover ul li:hover {
      color: #d42e2e;
      background: whitesmoke;
    }
    nav ul li ul {
      display: none;
    }
    nav .nav-main-list {
      text-transform: uppercase;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 1.2rem;
    }
    nav .nav-social-list {
      justify-content: flex-end;
      font-family: "Courier New", Courier, monospace;
      font-size: 1rem;
      align-content: center;
      align-items: center;
    }

    <body>
    <nav>
        <ul class="nav-main-list">
            <li><a href="#">Home</a></li>
            <li><a href="#">Languages</a>
                <ul class="lang-list">
                    <li><a href="#">html</a></li>
                    <li><a href="#">css</a></li>
                    <li><a href="#">sass</a></li>
                    <li><a href="#">php</a></li>
                    <li><a href="#">jquery</a></li>
                </ul>
            </li>
            <li><a href="#">Frameworks</a>
                <ul class="frame-list">
                    <li><a href="#">Bootstrap</a></li>
                    <li><a href="#">Laravel</a></li>
                    <li><a href="#">Angular</a></li>
                </ul>
            </li>
            <li><a href="#">Tools</a>
                <ul class="tools-list">
                    <li class="a" href="#">Git</li>
                    <li class="a" href="#">Photoshop</li>
                    <li class="a" href="#">Github</li>
                </ul>
            </li>
        </ul>
        <ul class="nav-social-list">
            <li><a href="#">Fb</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Git</a></li>
            <li><a href="#">Codepen</a></li>
        </ul>
    </nav>
</body>

问题是两个ul都在上面，而不是在导航栏的中心。我可以通过从头开始重新编码来正确地完成这项工作，但我想找出错误或它不能工作的原因。
谢谢你，祝你今天愉快！!!

最佳答案

我认为你所看到的问题与填充和边距有关。我做了一些调整，不确定是否有所改善。

   * {
      margin: 0;
      padding: 0;
    }

    body {
      background: #f3c6c6;
    }

    ul {
      list-style-type: none;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    nav {
      background-color: #d42e2e;
      height: 2.5rem;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-items: center;
      justify-content: center;
      color: whitesmoke;
    }
    nav ul {
      height: 100%;
      width: 50%;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 0 2rem;
      vertical-align: middle;
    }
    nav ul li {
      height: 100%;
      margin: 0;
      margin-top: auto;
      padding: 0.25rem 0.5rem;
    }
    nav ul li:hover {
      color: #d42e2e;
      background: whitesmoke;
    }
    nav ul li:hover ul {
      margin: 0.5rem 0 0.25rem 0;
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    nav ul li:hover ul li {
      width: 100%;
      background: #d42e2e;
      color: whitesmoke;
    }
    nav ul li:hover ul li:hover {
      color: #d42e2e;
      background: whitesmoke;
    }
    nav ul li ul {
      display: none;
    }
    nav .nav-main-list {
      text-transform: uppercase;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 1.2rem;
    }
    nav .nav-social-list {
      justify-content: flex-end;
      font-family: "Courier New", Courier, monospace;
      font-size: 1rem;
      align-content: center;
      align-items: center;
    }

<body>
<nav>
    <ul class="nav-main-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Languages</a>
            <ul class="lang-list">
                <li><a href="#">html</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">sass</a></li>
                <li><a href="#">php</a></li>
                <li><a href="#">jquery</a></li>
            </ul>
        </li>
        <li><a href="#">Frameworks</a>
            <ul class="frame-list">
                <li><a href="#">Bootstrap</a></li>
                <li><a href="#">Laravel</a></li>
                <li><a href="#">Angular</a></li>
            </ul>
        </li>
        <li><a href="#">Tools</a>
            <ul class="tools-list">
                <li class="a" href="#">Git</li>
                <li class="a" href="#">Photoshop</li>
                <li class="a" href="#">Github</li>
            </ul>
        </li>
    </ul>
    <ul class="nav-social-list">
        <li><a href="#">Fb</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Git</a></li>
        <li><a href="#">Codepen</a></li>
    </ul>
</nav>

（参见great article from CSS Tricks for a complete guide to using flex）

关于html - flex元素在导航栏中未垂直对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52783163/