再次认识 vertical-align

 约 8 分钟

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

阅读 1.1k

推荐阅读

静静的撸码,无欲无求

3 人关注
24 篇文章
专栏主页
目录