Question

我正在尝试使两个UL垂直居中对齐（横轴）。我在Sass上这样做，可能会感到困惑，因为嵌套太多了。我说的是ul，它是nav的直接子代，即“ nav-main-list”和“ nav-social-list”。

这是我的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都在顶部，而不是在导航栏的中心。我可能会通过从头开始重新编码来正确地做到这一点，但我想查找错误或不起作用的原因。

谢谢你，祝你有美好的一天！

Answer 1

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

   * {
      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。）

flex项目在导航栏中未垂直对齐

1 个答案: