14.vertical-align垂直对齐

一.vertical-align属性

image-20210509193656787

image-20210509193745942

官方文档的翻译：vertical-align会影响行内级元素在一个行盒中垂直方向的位置
思考：一个div没有设置高度的时候，会不会有高度？
- 没有内容，没有高度
- 有内容，内容撑起来高度
但是内容撑起来高度的本质是什么呢？
- 内容有行高（line-height），撑起来了div的高度
行高为什么可以撑起div的高度？
- 这是因为==line boxes（行盒）==的存在，并且line-boxes有一个特性，包裹每行的inline level
- 而其中的文字是有行高的，必须将整个行高包裹进去，才算包裹这个line-level
那么，进一步思考：
- 如果这个div中有图片，文字，inline-block，甚至他们设置了margin这些属性呢？

image-20210509195749154

二.line boxes不同情况分析

2.1 情况一：只有文字时，line boxes如何包裹内容？（注意：红色是包裹的div，以下雷同）

image-20210509200002971

2.2 情况二：有图片，有文字时，line-boxes如何包裹内容？

image-20210509200032003

2.3 情况三：有图片，有文字，有inline-block（比图片要大）如何包裹内容？

image-20210509200058231

2.4 情况四：有图片，有文字，有inline-block（比图片要大）而且设置了margin-bottom，如何包裹内容？

image-20210509200143341

2.5 情况四：有图片、文字、inline-block（比图片要大）而且设置了margin-bottom并且有文字，如何包裹内容？

image-20210509200206613

image-20210509200237856

三.理解基线对齐

3.1 行内级元素对齐（inline-block没有内容）

image-20210509200743167

3.2 行内级元素对齐（inline-block有内容）

image-20210509201239703

3.3 两个行内块级元素的对齐（inline-block没有内容）

image-20210509202132036

3.4两个行内块级元素的对齐（inline-block有内容）

image-20210509202235300

3.5 两个行内块级元素的对齐（inline-block没有内容,但是在父盒子里基线下面有空隙）

image-20210509202606276

四.基线对齐

结论：line-boxes一定会想办法包裹住当前行中所有的内容。
但是，但是为什么对齐方式千奇百怪呢？
- 你认为的千奇百怪，其实有它的内在规律
- 答案就是baseline对齐
我们来看官方vertical-align的默认值：没错，就是baseline
- image-20210510090838702
但是baseline都是谁呢？
- 文本的baseline是字母x的下方
- Inline-block默认的baseline是margin-bottom的底部（没有，就是盒子的底部）
- Inline-block有文本时，baseline是最后一行文本的x的下方
一切都解释通了

五.vertical-align – 不同取值

现在，对于不同的取值就非常容易理解了

baseline(默认值)：基线对齐（你得先明白什么是基线）
top：把行内级盒子的顶部跟line boxes顶部对齐
middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐
bottom：把行内级盒子的底部跟line box底部对齐
<percentage>：把行内级盒子提升或者下降一段距离（距离相对于line-height计算\元素高度）， 0%意味着同baseline一样
<length>：把行内级盒子提升或者下降一段距离，0cm意味着同baseline一样

你能解释先的现象吗？

image-20210510091416995

image-20210510091424990

六.图片居中

6.1 父盒子高度不确定，图片vertical-align:middle

image-20210510092703107

<style>
    .box {
      background-color: pink;
    }
    i{
      width: 100px;
      height: 100px;
      background-color: red;
      display: inline-block;
    }
    img{
      vertical-align: middle;
    }
  </style>
   <body>

    <div class="box">
      <img src="../img/ysx.jpg" alt="" width="100">
      <span>spanxxx</span>
      <!-- <i></i> -->
    </div>

  </body>

6.2 父盒子高度确定，图片vertical-align:middle

image-20210510093845926

image-20210510094327172

6.3 父盒子高度不确定，里面还有别的inline-block

image-20210510094013427

6.4 定位position和transform实现图片真正居中

image-20210510095100673

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vertical-align的取值</title>
  </head>
  <style>
    .box {
      background-color: pink;
      height: 300px;
      /* line-height: 300px; */
    }

    i {
      width: 100px;
      height: 100px;
      background-color: red;
      display: inline-block;
    }

    img {
      /* vertical-align: middle; */
      position: relative;
      top: 50%;
      left: 0;
      transform:translate(0,-50%)
    }
  </style>

  <body>
    <div class="box">
      <img src="../img/ysx.jpg" alt="" width="100">
      <span>spanxxx</span>
      <!-- <i>inline-block</i> -->
    </div>
  </body>

</html>