您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

css:文本对齐属性vertical-align实现化学元素上标下标的显示

时间:05-22来源:作者:点击数:

文档

  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align

语法

vertical-align: <value>;

可选值:

  • sub:使元素的基线与父元素的下标基线对齐。
  • super:使元素的基线与父元素的上标基线对齐。
  • text-top:使元素的顶部与父元素的字体顶部对齐。
  • text-bottom:使元素的底部与父元素的字体底部对齐。
  • top:使元素及其后代元素的顶部与整行的顶部对齐。
  • bottom:使元素及其后代元素的底部与整行的底部对齐。

我们知道,化学元素需要按照如下的格式才能正确显示,不过会将原有的字体高度撑开

实现效果

在这里插入图片描述

实现代码

<style>
.box {
    font-size: 20px;
    line-height: 1;
    background-color: green;
    color: #fff;
  }

  .mini {
    font-size: 12px;
  }

  .title {
    font-size: 20px;
  }

  .text-bottom {
    vertical-align: text-bottom;
  }

  .text-top {
    vertical-align: text-top;
  }

  .sub {
    vertical-align: sub;
  }

  .super {
    vertical-align: super;
  }

  .top {
    vertical-align: top;
  }

  .bottom {
    vertical-align: bottom;
  }
</style>

<div class="title">默认</div>
<div class="box">
  <span>H2O2</span>
</div>

<div class="title">text-bottom、text-top</div>
<div class="box">
  <span>H2O2</span>
  <span>H<span class="mini text-bottom">2</span>O<span class="mini text-top">2</span></span>
</div>

<div class="title">sub、super</div>
<div class="box">
  <span>H2O2</span>
  <span>H<span class="mini sub">2</span>O<span class="mini super">2</span></span>
</div>

<div class="title">bottom、top</div>
<div class="box">
  <span>H2O2</span>
  <span>H<span class="mini bottom">2</span>O<span class="mini top">2</span></span>
</div>
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门