vertical-align
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
Values for inline elements
vertical-align
的默认值是baseline
- inherited: no, 不从父元素继承
Parent-relative values
These values vertically align the element relative to its parent element:
-
baseline
Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like <textarea>, is not specified by the HTML specification, meaning that their behavior with this keyword may vary between browsers. -
sub
Aligns the baseline of the element with the subscript-baseline of its parent. -
super
Aligns the baseline of the element with the superscript-baseline of its parent. -
text-top
Aligns the top of the element with the top of the parent element's font. -
text-bottom
Aligns the bottom of the element with the bottom of the parent element's font. -
middle
Aligns the middle of the element with the baseline plus half the x-height of the parent. -
<length>
Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed. -
<percentage>
Aligns the baseline of the element to the given percentage above the baseline of its parent, with the value being a percentage of the line-height property. A negative value is allowed. 百分比值不是相对于字体大小或者其他什么属性计算的,而是相对于line-height
计算的。
举个简单的例子,如下 CSS 代码:1{ 2 line-height: 30px; 3 vertical-align: -10%; 4}
实际上,等同于:
1{ 2 line-height: 30px; 3 vertical-align: -3px; /* = 30px * -10% */ 4}
Line-relative values
The following values vertically align the element relative to the entire line:
-
top
Aligns the top of the element and its descendants with the top of the entire line. -
bottom
Aligns the bottom of the element and its descendants with the bottom of the entire line.
For elements that do not have a baseline, the bottom margin edge is used instead.
Values for table cells
-
baseline
(andsub
,super
,text-top
,text-bottom
,<length>
, and<percentage>
) Aligns the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned. -
top
Aligns the top padding edge of the cell with the top of the row. -
middle
Centers the padding box of the cell within the row. -
bottom
Aligns the bottom padding edge of the cell with the bottom of the row.
The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.
我终于懂了 vertical-align
的场景:
- 使行内元素盒模型与其行内元素容器垂直对齐
- 垂直对齐表格单元内容
注意 vertical-align
只对行内元素、行内块元素和表格单元格元素生效:不能用它垂直对齐块级元素。
baseline 是怎么样的?
下图基线
所指向的就是 baseline, 默认元素的基线同基准元素(取行高最高的作为基准)的基线对齐。
关于图片默认间隙的问题?
下面 demo 的第四个例子,因为 vertical-align 默认值是 baseline, 图片的最下边源被认为是基线所在的位置
一些问题记录
第二、四、七、九个例子,Line-relative values
top, bottom 等值相对整行垂直对齐,不会使接下来的元素向他们的基线对齐,即不会修改基线。
第一、三、六、八个例子,Parent-relative values
会使接下来的元素向他们的基线对齐,即会修改基线。
1<iframe height="900" style="width: 100%;" scrolling="no" title="vertical-align demo" src="https://codepen.io/powerfulyang/embed/vYjbLbY?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
2 See the Pen <a href="https://codepen.io/powerfulyang/pen/vYjbLbY">
3 vertical-align demo</a> by powerfulyang (<a href="https://codepen.io/powerfulyang">@powerfulyang</a>)
4 on <a href="https://codepen.io">CodePen</a>.
5</iframe>
line-height
line-height的默认值是normal,同时还支持数值、百分比值、长度值、继承。请看下面的表格:
值 | 描述 |
---|---|
normal | 默认。设置合理的行间距。 |
number | 设置数字,此数字会与当前的字体尺寸相乘来设置行间距,即number为当前font-size的倍数。 |
length | 设置固定的行间距。 |
% | 基于当前字体尺寸的百分比行间距。 |
inherit | 规定应该从父元素继承 line-height 属性的值。 |
line-height 继承情况下
不同属性下的 line-height
最终的计算方式比较如下。
设置方式 | line-height | 计算后的line-height | 子元素继承的line-height |
---|---|---|---|
inherit | 父元素的line-height值 | 不用计算 | 父元素的line-height值 |
length | 20px | 不用计算 | 20px |
% | 150% | 自身font-size (14px) * 150% = 21px | 继承父元素计算后的line-height值 21px,而不是150% |
normal | 假如为1.2 | 自身font-size (16px) * 1.2 = 19.2px | 继承1.2,line-height = 自身font-size(32px) * 1.2 = 38.4px |
纯数字 | 1.5 | 自身font-size (14px) * 1.5 = 21px | 继承1.5,line-height = 自身font-size(32px) * 1.5 = 48px |
所以,在实际开发中, 我们一般设置行高的值为 `纯数字是最推荐的方式,因为其会随着对应的 font-size 而缩放,排版效果良好。
line-height 与内联元素垂直居中
行高等于容器高,外加 vertical-align: middle 可以设置单行文本的垂直居中