再次认识 vertical-align
css中的基础知识,上次在刷 segmentfault 遇见了一个相关的问题有再次看过 vertical-align 的描述。今天自己也遇见一个类似的问题,再次深入学习一下。
vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。
忆童年学习(涉及后文理解)
无论当初起跑的时候你学的是英语还是拼音,最后你还能记得英语的26个字母用拼音的方式怎么读吗?所以这个时候我就可以装一装了,我不是学的拼音。
由于后文学习的知识会涉及到小学知识,作为小学学霸的我开始发车了,没上车的赶快上车。
大致画了一个 四线三格
然后写了26个字母。总结了一些写法上面的规则如下:
- 大写字母始终写在上两格
- 小写字母
bdfhiklt
写在上两格 - 小写字母
gpqy
写在下两格 - 小写字母
j
写在上中下三格 - 小写字母除上述三种小写字母的情况以外都是写在中间格
语法学习
vertical-align 的默认值是 baseline,可以选择的值有baseline | sub | super | text-top | text-bottom | middle | top | bottom | 百分数 | 固定值。
行内元素(inline)
vertical-align: baseline; 默认值情况下,元素基线与父元素的元素基线对齐。
父元素内的字母基线刚刚按照我画的第三条线为基线,图片的基线与父元素的基础对齐,图片高度(15px)不足父元素基线到顶部的高度。
如果我试着不限制图片的高度不限制(50px),接下来会发现父元素被撑高了。但是顶部与父元素顶部平齐,底部与父元素内的文本的第三条基线对齐(画的基线只是作为参考)。
如果去掉小写字母 gpqy
会发现图片与div的底部还是会存在一个距离
通过上两图的对比,能发现我之前遇见的问题,就是img放置在div中,div的高度会比图片的高度高3px,3.5px,4px等情况。因为第三格的距离还是存在,也就能理解之前的有一种解决方案,如果div中不存在文本,直接设置 font-size: 0;
。但浏览器有最小字体限制,也就不是那么好的解决方案了。
vertical-align: sub; 元素的基线与父元素的下标基线对齐。(底部高度合适,内容没有被挤出四线格)
vertical-align: super; 元素的基线与父元素的上标基线对齐。(顶部高度不够,内容被挤出了四线格)
vertical-align: text-top; 元素顶端与父元素字体的顶端对齐。
vertical-align: text-bottom; 元素底端与父元素字体的底端对齐(为了与上面的super区分开来,给父元素加了一个高于本身高度的 line-height)。
vertical-align: middle; 元素中线与父元素的小写x中线对齐。
vertical-align: top; 元素及其后代的顶端与整行的顶端对齐。
vertical-align: bottom; 元素及其后代的底端与整行的底端对齐。
这里以父元素中的 y 作为参考直接的可以看出给 img 添加 top/bottom/middle 的情况。如果父元素设置了行高会出现什么情况呢?
为什么设置 vertical-align: middle; 能解决高度问题?
举例:
<div><img src="" alt="">
</div>
默认的vertical-align: baseline; 因此会在img与div底部之间有第三格中超出的内容的距离,这个具体的距离和字体的大小也有关系。如果设置图片为vertical-align: middle; 后,图片在父元素内是居中的,此时图片的高度如果大于内容的高度的时候,父元素的高度就会刚好等于图片的高度。
为什么父元素设置 line-height 后 vertical-align: bottom; 会出现如下情况?
这种情况应该是最糟糕的,设置line-height后父元素的基线不那么固定了,但是还是以父元素内文本字体的基线相关,并且随着字体的大小的变化而变化,当字体大小为0的时候才正好与父元素的底部对齐。
表格元素(table/table-cell)
表格元素中我们用到垂直居中的地方应该是比较多的,对于table元素或者是table样式均可以正常向上面的行内元素一样设置对齐方式。
vertical-align: top; 单元格的内边距的上边缘与行的顶端对齐。
vertical-align: middle; 单元格垂直居中。
vertical-align: bottom; 单元格的内边距的下边缘与行的底端对齐。
总结
知识点小,但是真正理解或者说遇见类似对齐的问题问题依然是问题,仔细理解了,下次应该能很好的面对问题了吧。
参考资料
https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align
转载于:https://www.cnblogs.com/unofficial/p/6126313.html
再次认识 vertical-align相关推荐
- 【译】Vertical-Align: All You Need To Know
原文地址:Vertical-Align: All You Need To Know Often I need to vertically align elements side by side. 我经 ...
- css+js+jq实训笔记
css+js+jq实训笔记 css第一天 css第二天 css第三天 css第四天 css第五天 css第六天 js第一天 js第二天 js第三天 js第四天 js第五天 js第六天 jq第一天 jq ...
- HTML5与CSS3基础教程笔记
1.一个网络注意包括以下三个部分 *文本内容(text content):在页面上让访问者了解页面内容的纯文字. *对其他文件的引用(references to other files):这些文件加载 ...
- 基于Web实现网络拓扑图
想想好像好久没用写博客了! 由于最近想跳槽了(ps:尽管公司挽留,提出一些异与往常的挽留"制度",But确实已经死心了) ,发现前一段时间一些做Hadoop,和Spark同事时常来 ...
- 自己搜集的一些前端面试题 初中级(较多)
Map 和Set的区别? 1. Map 是键值对, Set是值的集合, 当然键和值可以是任何得值, 2. Map可以通过get方法获取值, 二set不能 因为它只有值 3. 都能通过迭代进行for o ...
- firefox附加组件开发者指南(三)——XUL简介(下)
其他XUL功能 Overlay XUL的一个与众不同的特性就是overlay.可以将多个XUL文档联合起来,并当做一个单独的XUL文档来处理.在Firefox中,这用来对各种功能进行模块化并实现了扩展 ...
- github前端面试题1
2016/7/20 Myblog/ FrontendDeveloperQuestions/ QuestionsandAnswers at master · markyun/Myblog · GitHu ...
- jasperreport开发手册--ireport教程
转自: https://blog.csdn.net/frankaqi/article/details/50203877 iReport http://www.jasperreport.net 一 ...
- ExcelJS 使用帮助文档
ExcelJS 使用帮助文档 个人备忘,原文地址:https://github.com/exceljs/exceljs/blob/master/README_zh.md 安装 npm install ...
- 前端htm cssl总结
第1章 HTML基础 (一) HTML文件的基本结构和W3C标准 l HTML用来描述网页的一种语言,他是一种超文本标记语言(Hyoer Text Markuo Language),HTML不是一 ...
最新文章
- 一些通用性的haproxy调优tips
- 服务器线程数一直增加,.NET Core中遇到奇怪的线程死锁问题:内存与线程数不停地增长...
- 东京战纪服务器维护中,东京战纪7月21维护公告 当前测试进度介绍
- 解决在Android Studio 3.2找不到Android Device Monitor工具
- GitHub 添加开源协议
- 微信sdk 隐藏右上角菜单项
- rda冗余分析步骤_FEMS Microbiol Ecol |微生物生态学中的多变量分析
- 不要在考虑需求之前更多的在意你的职业镀金
- 深度学习推荐系统--协同过滤推荐算法+实现代码
- 分享一个奇葩SM2258XT板子(100-H00112581-590)没有CE跳线,只有CE飞线,顺便量产开卡
- matlab lu分解 源代码,矩阵的LU分解(Matlab程序)
- 论文《Fast spatial–temporal stereo matching for 3Dface reconstruction under speckle pattern projection》
- 打开lol一直连接服务器失败怎么回事,LOL英雄联盟连接失败无法连接服务器解决办法...
- 关于查找、搜集市场调查报告的一些网站收集
- python add sheet_Python系列(6)——使用openpyxl将三种类型的数据添加进新sheet及已有的sheet中且不覆盖原数据...
- 基于 DirectShow 实现 SourceFilter 常见问题分析
- 召唤神龙 javascript 调整地图大小
- redis crackit入侵事件总结
- 文法俱乐部 第三章 动词时态
- 计算机专业硕士论文字数要求,计算机专业硕士论文格式规范
热门文章
- Vue:echarts的柱状图为什么X轴上的文字不显示?
- python程序设计梁勇 百度网盘_20194220 2019-2020-2 《Python程序设计》实验二报告
- .net core vs java_VS Code 1.19.3调试.net core 2并始终满足“只能调试64位进程”
- 八皇后算法python_Python学习二(生成器和八皇后算法)
- winform打开cad图纸_CAD打开图纸的方法汇总
- 两个超长正整数的加法c语言,二个超长正整数的相加
- HALCON完全卸载重装
- VMware安装Win7虚拟机
- create_pose算子说明
- Php如何发出请求,PHP中如何发送HTTP请求?