标签:垂直,对齐,属性,css
7. 上标和下标
上标(vertical-align:super)使元素的基线(替换元素的底端)相对于父元素的基线升高,下标(vertical-align:sub)使元素的基线降低,移动的幅度CSS规范中没有规定,由浏览器来决定。例如有如下代码,其显示如图7-43所示。
<p>上标文字<span style="vertical-align:super;">vertical-align:super;</span>下标文字<span style="vertical-align:sub;">vertical-align:sub;</span></p>
图7-43 上标和下标
上下标不会改变元素文字的尺寸大小。
8. 长度值和百分比
和上下标类似,长度值和百分比值可使元素的基线(替换元素的底端)相对于父元素的基线升高(正值)或者降低(负值)。
上下标的移动尺寸是由浏览器确定的,而设定长度值或者百分比,可以精确控制文字上下移动的幅度。
百分比与行高有关,例如有如下代码,其显示如图7-44所示。
p { line-height : 2em; }
<p>行高2em,纵向百分比对齐:<span style="vertical-align:100%;">100%正数向上</span>,而<span style="vertical-align:-100%;">-100%负数向下</span>。</p>
图7-44 百分比对齐
设置垂直对齐会影响到行框高,例如有如下代码,其显示如图7-45所示。
p { line-height : 2em; }
<p>垂直对齐<span style="vertical-align:2em;">正数向上</span>,而<span style="vertical-align:-2em;">负数向下</span>。<p>行高2em,而设置垂直对齐的文字撑开了行框。</p>
图7-45 垂直对齐对行框的影响
注意:在IE中设定百分比或者数值对齐会造成内容的叠加混乱,如图7-46所示。
图7-46 IE中的叠加混乱


猜你喜欢
- 基础理论第一层:卷积层。第二层:卷积层。第三层:全连接层。第四层:输出层。图中原始的手写数字的图片是一张 28×28 的图片,并且是黑白的,
- 昨天十行代码实现文字识别,感觉怎样,是不是很爽今天咋们继续利用pillow和pytesseract来实现验证码的识别一、环境配置需要 pil
- 当你碰到下面的asp错误提示时,说明你asp运行脚本超时了! Active Serv
- 调试程序的过程中,发现通过os.path.join拼接的路径出现了反斜杠directory1='/opt/apps/upgradeP
- meta是html语言head区的一个辅助性标签。几乎所有的网页里,我们可以看到类似下面这段的html代码:<head> <meta&nbs
- 1.什么是Blazor? 有什么优势?ASP.NET Core Blazor 简介Blazor 是一个使用 Blazor 生成交互式客户端
- 任何熟悉SQL和关系数据库的人都遇见过大量的连接类型。最简单的说,连接(join)会把两个表的内容组合到一个虚拟表或者recordset内。
- 相信大家在爬虫中都设置过请求头 user-agent 这个参数吧? 在请求的时候,加入这个参数,就可以一定程度的伪装成浏览器,就不会被服务器
- 一、赋值不会开辟新的内存空间,只是复制了新对象的引用。所以当一个数据发生变化时,另外一个数据也会随之改变。二、浅拷贝创建新对象,其内容是对原
- tensorflow作为google开源的项目,现在赶超了caffe,好像成为最受欢迎的深度学习框架。确实在编写的时候更能感受到代码的真实存
- 这两天准备复习一下java,所以写一个采用dubbo的商场项目练练手,却卡第一个测试上,启动provider服务和Consumer服务,请求
- 举几个例子来介绍一下,Python 的 CSV模块的使用方法,包括,reader, writer, DictReader, DictWrit
- 浏览器缓存浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档。所以根
- 自动化整理计算机文件通过Python编程完成文件的自动分类、文件和文件夹的快速查找、重复文件的清理、图片格式的转换等常见工作。1. 文件的自
- 1. UDPUDP是一种无连接的、不可靠的传输协议,相比于TCP,UDP具有数据传输速度快、传输延迟小等优点,但是不保证数据的可靠传输,需要
- 先写一个批处理文件,给个例子。 代码如下:set rq=%date:~0,10% exp system/system的
- Django 作为后端Web开发框架,有时候我们需要用到定时任务来或者固定频次的任务来执行某段代码,这时我们就要用到Celery了。Djan
- 记录:256写SQL最高境界:SELECT * FROM 表名。当然这是一句自嘲。探究一下SQL语句中JOIN的用法,直到经历这个场景,变得
- 参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2操作系统:Windows我喜欢p
- 一、调用百度接口进行人脸属性识别安装好baidu-aip模块,获取了百度AI接口密钥后,即可调用百度接口进行人脸属性识别了。首先以杨紫的图片