CSS - vertical-align

深入理解vertical-align – line boxes

在css中，盒子是由其内部内容的高度来撑开的

官方文档的翻译：vertical-align会影响行内块级元素在一个行盒中垂直方向的位置

但是我们可以看到盒子和文本之间有一定的间隙，而这些间隙本质上是由于行高导致的

所以内容为文本的盒子本质上是由文本的行高撑起来的

但如果有多行文本的是，浏览器是怎么布局的呢？

本质上，浏览器在布局行内级元素和行内块级元素的时候，会将他们放置到一个虚拟的盒子中进行排列

而这个虚拟的盒子就被称之为行盒(line box)

行盒的作用是将当前行里面所有的内容全部包裹在内

在多行文本中每一行，在浏览器渲染的时候，就会存在一个行盒，行盒会将其中所有行内级元素和行内块级元素包裹在内

默认情况下，行内级元素和行内块级元素在行盒中水平排列的时候，是按照基线对齐的方式进行排列的

对于文本，其基线位于小写字母x的底部
对于行内替换元素和没有文本的行内块级元素，其基线位于元素的margin-bottom的底部
对于有内容的行内块级元素，其基线位于最后一行内容的基线所在的位置（无论该内容是文本还是其它元素）

2.vertical-align

vertical-align是用来设置行内块级元素在一个行盒中垂直方向的位置

也就是说vertical-align是设置在行内级或行内块级元素上的

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

所以解决之前行内替换元素和行内块级元素的下边缘的间隙方法是:

设置vertical-align的值为top/middle/bottom
将元素的display属性设置为block


<!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>Document</title>
  <style>
    .box {
      background-color: orange;
    }

    .box img {
      width: 200px;
      vertical-align: top;
    }

    .box .small {
      display: inline-block;
      width: 80px;
      height: 80px;
      background-color: #f00;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  
  <div class="box">
    普通的文本xxxx
    <img src="../images/kobe02.png" alt="">
    <span class="small">xxxxx</span>
    xxxxxx
  </div>

</body>
</html>

注意点

vetical-align:middle不能实现垂直居中对齐

注意:

上述代码并不能使div.box在div.container中在垂直方向上真正居中对齐

因为vertical-align: middle本质是和小写字母的x的中心点对齐

而在实际中，大写X的中心点才是正好和中线重合，小写x的中心点是略低于中线的

而且绝大部分的字体在实际设计的时候，为了美观，可能会对字体进行略微的下沉处理

因此上述代码不能够真正意义上使div.box在div.container中垂直居中对齐

只能做到近似的垂直居中对齐

使用vertical-align实现垂直居中

此时div.box在div.container中是真正意义上垂直居中对齐的

因为此时div.container中的字体大小和div.box中的字体大小是一致的

且在div.box中 line-height === height

在div.container中 line-height === height

所以此时div.box在div.container中是真正意义上垂直居中对齐

但是这么做的局限性很大

父盒子和子盒子中都必须满足height等于line-height
父盒子和子盒子中必须存在单行文本且只能是单行文本
子盒子中的字体大小必须要等于父盒子中的字体大小

如果div.box和div.container中字体大小不一致的时候

为了保证这两个元素是基线对齐，所以div.box无法实现在父元素中垂直居中对齐

例如上图中div.box的font-size大于div.container中的font-size

所以div.box中的字体会上浮，最终div.box距离上边的距离会小于其距离下边的距离

当line-height大于height的时候，内容会下沉，反之内容会上浮

15_CSS - vertical-align

CSS - vertical-align

深入理解vertical-align – line boxes

2.vertical-align

注意点