前言
为什么写这篇总结?最近在文字图标垂直对齐上用到css的vertical-align属性,但是有的时候有效,有的时候无效,常常疑惑不解,反思这是自己对vertical-align的基本认知不够造成的。所以想在自己理清问题前因后果的同时,加深对vertical-align的理解,产出如下笔记。
vertical-align是自css1就存在的属性,该属性定义行内元素(也就是display值为inline和inline-block的元素)、表格元素(table-cell)以及 ::first-letter、::first-line选择的元素的基线相对于该元素所在行(line-box)的垂直对齐。
行内元素:a, span, b, i, button, input, label, select, textarea 等
表格元素:display为table-cell的元素 一般指td
其他: ::first-letter、::first-line
取值
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
注释: 根据MDN说明,取值可分为三大类
-
相对父元素的值(使设置该属性的元素相对其父元素垂直对其)
- baseline 默认值,元素的基线相对于父元素的基线对齐
- sub 元素的基线与父元素的下标基线对齐
- super 元素的基线与父元素的上标基线对齐
- text-top 元素的顶部与父元素的文字顶部对齐
- text-bottom 元素的底部与父元素的文字底部对齐
- middle 元素的中部与父元素的基线+父元素x-height/2(父元素字母x的高度的一半)对齐
- <length> 元素基线对齐到父元素基线上方的指定位置,可取负值
<percentage> 元素基线对齐到父元素基线上方的对应百分比位置。该百分比相对于父元素的line-height,可取负值
注:<length>,<percentage>取负值越多时距离上顶端越远,和margin取值相反
没有基线的元素,使用外边距的下边缘替代。
-
相对行(line-box)的值(使设置该属性的元素相对整行垂直对齐)
- top 使元素及其后代元素的顶部与整行的顶部对齐
- bottom 使元素及其后代元素的底部与整行的底部对齐
-
表格单元格的值
- baseline(以及 sub, super, text-top, text-bottom, <length>, <percentage>) 使单元格的基线,与该行中所有以基线对齐的其它单元格的基线对齐
- top 使单元格内边距的上边沿与该行顶部对齐
- middle 使单元格内边距盒模型在该行内居中对齐
- bottom 使单元格内边距的下边缘与该行的底部对齐
baseline
baseline基线,字母'x'的下边沿线
盒模型的上下边界 与 baseline
如图:
绿色:行高的上下边界
红色:文本的上下边界
蓝色:baseline位置
左、中、右分别为行高1、2、0.5的表现,行高为1时,文本边界与行高边界重合。内联元素的外边缘与该行高的顶部和底部边缘对齐。如果行高小于字体的高度,不会受影响,但top, bottom 会对齐文本边界。
inline-block元素的基线
图中左、中、右都是inline-block元素,左图inline-block元素内部存在未脱离文档流的文本x,中图在左图包含文本基础上添加overflow:hidden,右图不包含任何文本。红线表示margin-box边界, 蓝线表示baseline,黄色为border, 白色为padding区域,绿色为content区域。
可见 inline-block元素的外边缘就是margin-box的边缘、inline-block元素的baseline的位置要看该元素有没有处于正常流的内容以及元素的overflow属性值是不是visible。
baseline的确定规则
1、inline-table元素的baseline是它的table第一行的baseline。
2、父元素line-box的baseline是最后一个inline-box的baseline。
3、inline-block元素的baseline确定规则
- 如果内部有line-box,则inline-block元素的baseline就是最后一个作为内容存在的元素的baseline,而这个元素的baseline的确定就要根据它自身来定了。
- 如果其内部没有line-box或它的overflow属性不是visible,那么baseline将是这个inline-block元素的底margin边界。
icon与文本对齐
上图左为icon设置vertical-align: middle没有生效,很明显图标和文字没有对齐。标注参考线后
原因在于左边文字vertical-align使用默认值baseline。而vertical-align:middle对应元素中部对齐于baseline加上半个x的距离(half of the x-height),文本会高出icon一段距离。
右图中,文字与icon都对齐于一个中点,line-box的行高增加,baseline位置不变,文字的baseline稍微下移,位于line-box的baseline的下方。此时文本与图标对齐。
总结:查阅很多资料,算把vertical-align理解了。其中还有一些深入的知识点没有记录,下面会贴上参考资料。
写这篇笔记同时也解决了我之前的对inline-block元素间存在间隙的疑问以及对应的解决方案,点此进入。
总之 收获多多 ( • ̀ω•́ )✧
参考资料:
深入理解css中vertical-align属性
关于Vertical-Align你需要知道的事情 [原] [译]
深入理解css之vertical-align
MDN vertical-align
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。