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

文档

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/142922.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023年行业寒冬-运维求职建议

由于前几个月裁员&#xff0c;近期到就业市场上寻找工作&#xff0c;BOSS刷了两三个月&#xff0c;都已经刷烂了&#xff0c;翻来覆去还是那几家公司在招人&#xff0c;面试也有&#xff0c;但很多面试基本就是走个流程&#xff0c;对方也直言候选人很多&#xff0c;需要多加比…

力扣题库2. 两数相加

给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外&#xff0c;这两个数都不会以 0 开…

JAVA 中集合取交集

日常工作 经常需要取两个数据集的交集。对常用的List 和Set集合做了一个测试 public static void main(String[] args) {List<Integer> list1 Lists.newArrayList();List<Integer> list2 Lists.newArrayList();Set<Integer> set3 Sets.newHashSet();Set&l…

JavaWeb篇_10——HttpServletRequest对象

HttpServletRequest对象 HttpServletRequest对象代表客户端浏览器的请求&#xff0c;当客户端浏览器通过HTTP协议访问服务器时&#xff0c;HTTP请求中的所有信息都会被Tomcat所解析并封装在这个对象中&#xff0c;通过这个对象提供的方法&#xff0c;可以获得客户端请求的所有…

基于SSM的药店药品销售系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

程序员的护城河

程序员的护城河是一个多维度的概念&#xff0c;它包括技术能力的深度、对创新的追求、沟通协作等软实力。这些因素共同构成了程序员在保障系统安全、数据防护以及网络稳定方面所起到的重要作用。 首先&#xff0c;技术能力的深度是程序员的核心竞争力之一。随着科技的不断发展…

车载通信与DDS标准解读系列(1):DDS-RPC

▎RPC & DDS-RPC RPC&#xff1a;Remote Procedure Call&#xff0c;远程过程调用。 远程过程调用是一种进程间通信&#xff0c;它允许计算机程序在另一个地址空间中执行子程序&#xff0c;就好像用别人的东西像用自己的一样&#xff0c;常用于分布式系统。 远程过程调用…

3分钟带你了解前端缓存-HTTP缓存

前情提要 前端缓存分为下面三大类&#xff0c;本文主要讲解HTTP缓存~ 1. HTTP缓存 强缓存协商缓存 2. 浏览器缓存 本地小容量缓存本地大容量缓存 3. 应用程序缓存 HTML5应用程序缓存 缓存作用 减少了冗余的数据传输减少服务器的负担提高了网站的性能加快加载网页速度 …

ssh 免密码登录

ssh 免密码登录 1. 原理 1.1 密码登录的通俗解释 把服务器当作一个凤凰社&#xff0c;每次进社公干都需要拿特别的门票入场&#xff0c;门票便是服务器上的账户密码&#xff1b; 1.2 免密登录 对于凤凰社的高级会员&#xff0c;会在社内存储一张高级会员身份&#xff08;id_rsa…

前端---认识CSS

文章目录 什么是CSS&#xff1f;CSS在HTML中的位置内联样式内部样式外部样式 CSS的选择器普通选择器标签选择器类选择器id选择器通配符选择器 复合选择器后代选择器子选择器并集选择器伪类选择器 CSS的样式 什么是CSS&#xff1f; 就像我们前面说的&#xff1a;CSS是用来描述页…

易基因:综合全基因组DNA甲基化和转录组学分析鉴定调控骨骼肌发育潜在基因 | 研究进展

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 DNA甲基化是骨骼肌发育中关键的表观遗传调控机制。但胚胎鸭骨骼肌发育中负责DNA甲基化的调控因子仍然未知。 2023年10月23日&#xff0c;南京农业大学动物科技学院于敏莉副教授团队在《…

无防御香港服务器如何防CC

虽然相对于DDos攻击&#xff0c;CC攻击的防护危害性相对没有那么大&#xff0c;但是像香港地区普遍对内地的网络比较小的话&#xff0c;CC攻击还是 蛮让人头痛的&#xff0c;实际上对CC的防护尤其是一些小体量的网站&#xff0c;租用高防服务器是划不来的&#xff0c;如果服务器…

核心!华为自研系统鸿蒙趋势

鸿蒙系统的推出引起了全球的关注&#xff0c;毕竟这是华为自主研发的操作系统。这个系统有一些特点很独特。首先&#xff0c;它的自主可控性是一大特色。因为是自家研发的&#xff0c;所以更容易适应外界变化。其次&#xff0c;它采用了分布式架构&#xff0c;这样不同设备之间…

GitHub Universe 2023:AI 技术引领软件开发创新浪潮

GitHub 是全球领先的软件开发和协作平台&#xff0c;数百万开发者和企业在此分享、学习和创建卓越的软件。同时 GitHub 处在 AI 技术前沿&#xff0c;通过其先进的 AI 技术增强开发者体验并赋能未来软件开发的使命。在今天的文章中&#xff0c;我们将一起看看在 GitHub 年度大会…

Azure 机器学习:MLOps - 使用 Azure 机器学习进行模型管理、部署和监视

本文介绍如何在 Azure 机器学习中应用机器学习运营 (MLOps) 做法&#xff0c;以管理模型的生命周期。 应用 MLOps 做法可改善机器学习解决方案的质量和一致性。 关注TechLead&#xff0c;分享AI全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验&#xff…

project打开文件时,显示无法识别此文件格式?

环境&#xff1a; Win 10 专业版 project 2021 问题描述&#xff1a; project打开文件时&#xff0c;显示无法识别此文件格式&#xff1f; 解决方案&#xff1a; 1.测试新建文件&#xff0c;打开都是这样&#xff0c;检查文件都不是旧版本创建&#xff08;未解决&#xff…

Linux之输入输出重定向和管道

一、是什么 linux中有三种标准输入输出&#xff0c;分别是STDIN&#xff0c;STDOUT&#xff0c;STDERR&#xff0c;对应的数字是0、1、2&#xff1a; STDIN 是标准输入&#xff0c;默认从键盘读取信息STDOUT 是标准输出&#xff0c;默认将输出结果输出至终端STDERR 是标准错误…

做作业用台灯好还是不用台灯?高口碑护眼台灯分享

相信大家在生活着也遇到过这个问题&#xff0c;就是孩子在写作业时需不需要使用台灯。有些家长可能认为家里室内的亮度已经很足了&#xff0c;没必要使用台灯。 其实这个想法是错误的&#xff0c;孩子在书写作业时是需要使用台灯的&#xff01;室内灯源照到书桌时时远远不够的&…

UDP主要丢包原因及具体问题分析

一、主要丢包原因 1、接收端处理时间过长导致丢包&#xff1a;调用recv方法接收端收到数据后&#xff0c;处理数据花了一些时间&#xff0c;处理完后再次调用recv方法&#xff0c;在这二次调用间隔里,发过来的包可能丢失。对于这种情况可以修改接收端&#xff0c;将包接收后存入…

Python【寻找缺失元素】

要求&#xff1a; 给定一个非负整数数组A&#xff0c;该数组的元素都是从1~N的元素组成&#xff0c;现在发现其中缺失一个&#xff0c;请找出这个缺失的元素 代码如下: def find_missing_element(arr):"""找出缺失的元素:param arr: 包含1~N之间的整数的数组&…