关于vertical-align的种种_verticalaling定义了几种类型-优快云博客

本文深入探讨CSS中vertical-align属性的使用方法与限制条件，包括其对不同元素类型的作用效果，以及如何通过长度和百分比调整元素位置。适用于前端开发者理解和解决网页布局问题。

有些时候 vertical-align 的渲染结果并不同我们想象的一样。
虽然现在已经有很多 CSS 属性可以完美替代 vertical-align 的渲染效果，但有些时候碰到还是很头疼，所以最好还是搞清楚它。

☆作用对象：inline、inline-block子元素。
这个属性失效的情况：

作用对象是块级元素（因为块级元素会霸占整行）；
作用元素设置了浮动、定位等脱离文本流的属性（父元素设置这些属性不影响）；
父元素是flex或grid布局（作用元素设置这些布局不影响）。

属性值：

值	描述
`baseline`	(default) 元素的基线与父元素的基线对齐。
`top`	把对齐的子元素的顶端与line box顶端对齐。
`text-top`	把元素的顶端与父元素内容区域的顶端对齐(文字顶端)。
`middle`	元素的中垂点与父元素的基线加1/2父元素中字母的高度对齐。
`bottom`	把对齐的子元素的底端与 line box底端对齐。
`text-bottom`	把元素的底端与父元素内容区域的底端对齐。
`sub`	垂直对齐文本的下标。
`super`	垂直对齐文本的上标。
`inherit`	采用父元素相关属性的相同的指定值。
长度	通过距离升高或降低元素。
%	通过相对于`line-height`属性的百分值升高或降低元素。0值等同于`baseline`。

看表格的描述太抽象，还不如来点儿实际的～
HTML 代码：

<div class="container">
  Father Text
  <span class="content">
  	Child Text
  </span>
  <img class="align" src="./img/xx.png" alt="vertical align image">
  <!-- 下面的图片不作特定垂直对齐,作为一个参照 -->
  <img src="./img/**.png" alt="reference image">
</div>

baseline：元素放在父元素的基线上。
实际上文本子元素是文本内容放在父元素基线上。因为这是默认值，其他子元素都是baseline。
top：元素的顶端与行中最高元素的顶端对齐。
```
.align { vertical-align: top; }
```
从baseline看，这里的最高元素是参照图。
text-top：元素的顶端与父元素字体的顶端对齐。
middle：元素在父元素内垂直居中。
可以看出，middle实际是指元素中部与父元素文本中部对齐。
bottom：元素底端与行中最低元素底端对齐。
从baseline可以看出这里最低元素是 content 元素。
text-bottom：元素底端与父元素文本底端对齐。

！这和baseline是不一样的。
长度值：使用定长表示元素底部与父元素基线的距离。
正值升高元素，负值降低元素。0值等同于baseline。
```
.align {
  vertical-allign: 10px; /* 元素相对于基线向下偏移2px */
}
```
百分比：元素底部相对于父元素基线移动相对于元素行高line-height的百分比。
这里百分比是相对于元素的line-height值。
```
.align { vertical-align: -10%; }
```
假设.align本身未设置行高，继承的行高是20px，这里的-10%代表的实际值是-10% × 20 = -2px，所以是让元素下降 2 像素。

设置.align行高为100px，这里的-10%代表的实际值是-10% × 100 = -10px，所以是让元素下降 10 像素。

！IE6 / 7 下的vertical-align百分比值不支持小数的line-height。