再次认识 vertical-align

William_Sang 发布于2019-08-30 13:11 / 1817人阅读

摘要：因为第三格的距离还是存在，也就能理解之前的有一种解决方案，如果中不存在文本，直接设置。单元格垂直居中。单元格的内边距的下边缘与行的底端对齐。

css中的基础知识，上次在刷 segmentfault 遇见了一个相关的问题有再次看过 vertical-align 的描述。今天自己也遇见一个类似的问题，再次深入学习一下。
vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

忆童年学习（涉及后文理解）

无论当初起跑的时候你学的是英语还是拼音，最后你还能记得英语的26个字母用拼音的方式怎么读吗？所以这个时候我就可以装一装了，我不是学的拼音。
由于后文学习的知识会涉及到小学知识，作为小学学霸的我开始发车了，没上车的赶快上车。

大致画了一个 四线三格 然后写了26个字母。总结了一些写法上面的规则如下：

大写字母始终写在上两格

小写字母 bdfhiklt 写在上两格

小写字母 gpqy 写在下两格

小写字母 j 写在上中下三格

小写字母除上述三种小写字母的情况以外都是写在中间格

语法学习

行内元素（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; 能解决高度问题？

举例：

默认的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...

云服务器 GPU云服务器再次再次创业无法再次打开再次购买幕布

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115365.html

CSS世界（文档）

摘要：整理完了高性能这本书，往下就需要快速处理世界，这本讲解特性的书非常值得一读，内容完整，重点突出，实战性强，就是语言啰嗦。由于全书内容太多，而且需要一点一点的整理，所以放到了站点上，方便大家查看。整理完了《高性能JavaScript》这本书，往下就需要快速处理《CSS世界》，这本讲解CSS特性的书非常值得一读，内容完整，重点突出，实战性强，就是语言啰嗦。由于全书内容太多，而且需要一点一...

CNZPH 2019-08-30 15:54 评论0 收藏0
我对line-height及vertical-align的一点理解

摘要：张鑫旭老师在文章我对的一些理解与认识一中提到属性的表现与否，仅仅与其父标签有关，至于我们通常看到的与后面的文字垂直居中显示那都是假象经过摸索测试，才对这句话有种豁然开朗的感觉。匿名元素我是一段卡哇伊的文字。张鑫旭老师在文章《我对CSS vertical-align的一些理解与认识（一）》中提到： vertical-align:middle属性的表现与否，仅仅与其父标签有关，至于我们通...

Eidesen 2019-08-30 13:53 评论0 收藏0
我对line-height及vertical-align的一点理解

摘要：张鑫旭老师在文章我对的一些理解与认识一中提到属性的表现与否，仅仅与其父标签有关，至于我们通常看到的与后面的文字垂直居中显示那都是假象经过摸索测试，才对这句话有种豁然开朗的感觉。匿名元素我是一段卡哇伊的文字。张鑫旭老师在文章《我对CSS vertical-align的一些理解与认识（一）》中提到： vertical-align:middle属性的表现与否，仅仅与其父标签有关，至于我们通...

Harriet666 2019-08-01 18:27 评论0 收藏0
技本功丨呀~我不会写CSS之vertical-align（上集）

摘要：某日阅读世界，笔者的一段话鞭挞了我的灵魂。原文是这样的说到这里，我就忍不住多说两句。很多其实工作很多年的前端开发人员，也可能不知道的属性值支持数值，更不知道支持负值，这着实让我很意外。只显示文本的时候行高是。上集完敬请期待中下集 showImg(https://segmentfault.com/img/bVbmTbb?w=277&h=336); 某日阅读《CSS世界》，笔者的一段话鞭挞...

tianlai 2019-08-30 15:55 评论0 收藏0
CSS魔法堂：深入理解line-height和vertical-align

摘要：下的属性值详解以下内容均在中测试默认对齐方式这里作为参考系，而它的就是所要对齐的了。没有任何变化。那改变又如何呢为了让的清晰可见，特意添加一个的包裹着。前言一直听说line-height是指两行文本的基线间的距离，然后又说行高等于行距，最近还听说有个叫行间距的家伙，@张鑫旭还说line-height和vertical-align基情四射，贵圈真乱啊。。。。。。于是通过本篇来一探究竟...

avwu 2019-08-30 12:52 评论0 收藏0