css之 vertical-align用法详解
目录
- 基本知识
- 默认例子
- 1、baseline 基线对齐
- 2、上标 super 和 下标 sub
- 2.1 sub
- 2.2 super
- 3、top 和 bottom
- 3.1 top
- 3.2 bottom
- 4、text-top 和 text-bottom
- 4.1 text-top
- 4.2 text-bottom
- 5、middle 中线对齐
- 6、% 百分比
- 7、具体的值
基本知识
vertical-align 属性设置元素的垂直对齐方式。
css中的vertical-align 属性只能用于 行内元素 和 置换元素(例如 图像和表单输入框) ,此属性不继承。
接下来我们用例子去分析这些值的意思及产生的效果:
首先我们先看一张图,文字的顶线、中线、基线,基线是字母x的下边缘
默认例子
<style>* {margin: 0;padding: 0;}div {width: 200px;line-height: 60px;margin: 10px;font-size: 20px;background-color: aquamarine;}img {width: 20px;}span {background-color: antiquewhite;}
</style><div>xx<img src="../img/1.jpg" alt="" /><span>I am a page.</span></div>
效果:
1、baseline 基线对齐
baseline 让元素的基线 与父元素文本的基线对齐。
如果目标元素没有基线,例如 图片、表单输入框或其它置换元素,那么目标元素的底端与父元素的基线对齐。
上述例子我们可以看出来,图片和文字的基线(字母x的下边缘)对齐了。
为什么我们没有给 img 标签加vertical-align属性,但是却基线对齐了呢?
因为vertical-align的默认值就是baseline,不写就默认是基线对齐。这也就是为什么图片和文字在同一行时,图片下方会有间距,因为默认与文字的基线对齐了。
2、上标 super 和 下标 sub
2.1 sub
sub把元素放在下标处,即元素的基线(对置换元素来说是底边线)低于父元素的基线。但是具体低多少是没有规定的,不同的用户代理中可能不同。
2.2 super
和sub相反,让元素的基线高于父元素的基线,具体高多少由用户代理来决定
3、top 和 bottom
3.1 top
使元素及其后代元素的顶部与整行的顶部对齐。
img {vertical-align: top;
}
3.2 bottom
bottom 与 top 相反。使元素及其后代元素的底部与整行的底部对齐。
img {vertical-align: bottom;
}
4、text-top 和 text-bottom
4.1 text-top
使元素的顶部与父元素的字体顶部对齐。
注意:这个是与父元素的字体顶部对齐,即使给子元素设置了不同大小的 font-size,也是按照父元素的字体来对齐。看例子,我新增一个子元素span标签,字体设置为30px,效果如下:
4.2 text-bottom
使元素的底部与父元素的字体底部对齐。
注意:这个是与父元素的字体底部对齐,即使给子元素设置了不同大小的 font-size,也是按照父元素的字体来对齐。
5、middle 中线对齐
使元素的中部与父元素的基线向上偏移0.5ex处的线对齐(1ex等于父元素的font-size)
6、% 百分比
百分数不能像align="middle”那样对齐图像。把vertical-align的值设为百分数,效果是把元素的基线(或置换元素的底边)相对父元素的基线抬升或下沉指定的量(指定的百分数相对元素自身而非父元素的line-height 计算)。正百分数抬升元素,负百分数下沉元素。如果抬升或下沉的量足够大,目标元素可能会出现在相邻的行上(见图6-20),因此使用百分数时要小心。
给img设置个行高为20px,vertical-align 为100%:
img {vertical-align: 100%;line-height: 20px;
}
图片上移了自身line-height的100%,也就是20px
vertical-align 设置为负值的百分比后,向下沉。
7、具体的值
vertical-align的效果很简单:把元素抬升或下沉声明的距离。因此,vertical-align:5px;把元素从原位置向上抬升5像素。长度值为负时,下沉元素。
设置图片的vertical-align为10px:
img {vertical-align: 10px;
}
图片上移了10px
vertical-align设置为负值时,在原来基础上下移。
css之 vertical-align用法详解相关推荐
- Css中display:inline-block用法详解
display:block就是将元素显示为块级元素 block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div&g ...
- highlight.js css,JS库之Highlight.js的用法详解
下载到本地后,新建个页面测试 1.在head中加入css和js的引用 highlight hljs.initHighlightingOnLoad(); 2.添加对应要显示的内容 # 读取文件内容 de ...
- css文本行高是哪个属性_css属性行高line-height的用法详解
css属性行高line-height的用法详解 发布时间:2014-08-02 23:21:52 作者:佚名 我要评论 本文介绍下css中的line-height属性的用法,通过实例学习css ...
- dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...
- css伪元素before和after用法详解
css伪元素before和after用法详解 要想了解伪元素before和after到底是什么,首先就应该打开编译器敲入代码并在浏览器运行检查 <!DOCTYPE html> <ht ...
- jQuery 表单验证插件,jQuery Validation Engine用法详解
jQuery 表单验证插件,jQuery Validation Engine用法详解 功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...
- spring boot模板引擎thymleaf用法详解
spring boot模板引擎thymleaf用法详解 Spring-boot支持FreeMarker.Thymeleaf.jsp.veocity 但是对freemarker和thymeleaf的支持 ...
- fileinput 时间_JavaScript_Bootstrap Fileinput文件上传组件用法详解,最近时间空余,总结了一些关...
最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到phpstudy平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的 ...
- PHP使用Switch语句判断星座,PHP的switch判断语句的“高级”用法详解 用switch语句怎样判断成绩的等级...
php switch case 求具体详解,case里面能加if语句? swich 语句 我非常喜欢用 case里面加if干嘛 . php switch中能加if语句吗 PHP里 switch cas ...
- 【linux】——linux ls命令参数及用法详解---linux显示目录内容命令
linux系统中ls命令的用法详解 ls命令是linux下最常用的命令.ls命令就是list的缩写,缺省下ls用来打印出当前目录的清单,如果ls指定其他目录,那么就会显示指定目录里的文件及文件夹清单. ...
最新文章
- 注册和登陆与数据库的链接
- 深入浅析nginx部署及简单优化
- ubuntu终端按ctrl+s就卡住怎么办?(按ctrl+q)(锁住)(锁屏)(暂停打印)
- 《算法导论》学习总结 — 2.第一章 第二章 第三章
- shell编程的一些例子4
- oracle decode_ORACLE常见问题-100问(系列一)
- MyBatis日志插件:Mybatis Log Plugin——将控制台输出的mybatis日志转化成可执行的sql语句
- springCloud工作笔记090---SpringCloud_redis配置多数据源_redis多数据源
- Android内部类监听和多对象监听方法
- CentOS下MFS分布式文件系统搭建
- 16bit随机数生成matlab,关于matlab生成随机数
- 浙江大学软件工程c语言复试题库,2022浙江大学软件工程考研经验备考指导
- UE学习笔记(一)UC++基础类
- 人民币小写转大写的一般方法
- 【OpenCV图像处理入门学习教程六】基于Python的网络爬虫与OpenCV扩展库中的人脸识别算法比较
- 谈谈如何通过需求文档产生工作排期
- 原生Android设置sim卡锁定,开启SIM卡密码保护
- css3之 谜灯卡片_CSS3 迷幻光影文本特效
- 个人网站与博客的区别
- Qt6.0+vs2019环境配置