目前正在网上查找内容，看看如何做到这一点，但当我设置行高时，它似乎对我不起作用，我只是想在未来发短信。我的下一步是flexbox，但我正在努力学习如何用我目前拥有的东西来做到这一点：如果有人能给我发送解释如何做到这一步的参考链接；那就太好了。
#topbar {
background: gray;
height: 10rem;
text-align: center;
}
#topbar li {
text-align: center;
vertical-align: top;
line-height: 10rem;
display: inline-block;
}<body>
<div id=topbar>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</div>
</body>我假设您希望底部的ulli垂直对齐，也希望中心水平对齐。基于这个假设，我编写了这段代码。希望这能帮助你。
代码段：
#topbar {
background: gray;
height: 10rem;
text-align: center;
display: flex;
justify-content: center;
align-items: flex-end;
}
#topbar ul {
margin: 0;
padding: 0;
}
#topbar li {
text-align: center;
vertical-align: top;
display: inline-block;
}<body>
<div id="topbar">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
</body>您的文本已经对齐。
但对于未来的参考，只需使用Flexbox，它会更容易，问题更少。
给容器一个display: flex、justify-content: center和align-items: center。
然后，您只能给<li>右边和左边的边距
代码段：
#topbar {
background: gray;
height: 10rem;
display: flex;
justify-content: center;
align-items: center;
}
#topbar li {
line-height: 10rem;
list-style: none;
}
#topbar li:not(:first-child) {
margin-left: 5px;
}<body>
<div id=topbar>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</div>
</body>