<分区>
我试图让我的两个 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 都在顶部而不是在导航栏的中心。我可能会通过从头开始重新编码来正确地做到这一点，但我想找到错误或它不起作用的原因。
谢谢你，祝你有美好的一天!!!