微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决尝试垂直对齐div中的文本;文本为内嵌显示 摘要:摘要:

当前在网上查找东西,看看该怎么做,当我设置行高时,它似乎对我不起作用,我只是想在将来发短信。我的下一步是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: flexjustify-content: centeralign-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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。