尝试垂直对齐div中的文本；文本为内嵌显示 摘要：摘要：

编程问答 2022-08-16

问题描述

当前在网上查找东西，看看该怎么做，当我设置行高时，它似乎对我不起作用，我只是想在将来发短信。我的下一步是flexBox，但我正在尝试学习如何使用当前的功能：如果有人可以给我发送解释性操作的参考链接；很好。

    someMethod() {
        switch (this.params.c) {
            case (MyEnum.f): {
                this.params.b; // kNown to be X
            }
        }
    }

#topbar {
  background: gray;
  height: 10rem;
  text-align: center;
}

#topbar li {
  text-align: center;
  vertical-align: top;
  line-height: 10rem;
  display: inline-block;
}

解决方法

我假设您希望ul li垂直位于底部，水平居中对齐。基于这个假设，我编写了这段代码。希望这对您有所帮助。

摘要：

#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>

html