css属性之vertical-align

css属性之vertical-align

## vertical-align用来指定行内元素（inline）或表格单元格（table-cell）以及图片的垂直对齐方式。对于块级元素，vertical-align是不起作用的。

vertical-align的值可以归为以下4类：

属性	属性值
线类	如 baseline、top、middle、bottom
文本类	如 text-top、text-bottom
上标下标类	如 sub、super
数值百分比类	如 px、em、%等

vertical-align 理解`
给一个元素（子元素）设定 vertical-align 时，浏览器产生的动作是：

1. 根据该值去 VA-table 中查找 子元素对齐点 和 父元素对齐点 这两个隐式参数值。父元素不动，移动子元素，让 子元素对齐点 向 父元素对齐点 对齐。
2. 确定子元素此时所处的 linebox 是哪个。确定父元素在这个 linebox 中的上边缘(linebox top)确定子元素自身的 inlinebox top 。
3. 调整子元素的上下位置，让子元素的 inlinebox top 对准父元素的 linebox top 。
4. 当我们将 这种 inline 元素塞到 linebox 里头时， 的对齐点实际上只有三个。
5. 子元素的 inlinebox top, 即是其上边缘。
6. 子元素的 inlinebox bottom 和 baseline 即是其下边缘。 子元素的 middle 对应着图片垂直方向的中心点。

这是基于文本中线取值middle

  <div class="block">
    xHgfsdsdfadsfggfdghfdhtsrhts <span>123span> <img src="img_11.jpg" alt="" srcset="">
  div>
  <style>
  .block {
    height: 500px;
      width: 500px;
      border: 1px solid #ddd;
      font-size: 60px;
  }
  span {
    font-size: 25px;
    background-color: #ddd;
   vertical-align: middle;
  }
  img{
    height: 150px;
    width: 150px;
    vertical-align:middle;
  }
  style>

这是基于文本顶线取值top

  <div class="block">
 fsdsdfas <span>123span> <img src="img_11.jpg" alt="" srcset="">
  div>



  <style>
  .block {
    height: 500px;
      width: 500px;
      border: 1px solid #ddd;
      font-size: 60px;
  }
  span {
    font-size: 25px;
    background-color: #ddd;
  }
  img{
    height: 150px;
    width: 150px;
    vertical-align:top;
  }
  style>
  

这是基于文本底线取值bottom

  <div class="block">
 fsdsdfas <span>123span> <img src="img_11.jpg" alt="" srcset="">
  div>



  <style>
  .block {
    height: 500px;
      width: 500px;
      border: 1px solid #ddd;
      font-size: 60px;
  }
  span {
    font-size: 25px;
    background-color: #ddd;
  }
  img{
    height: 150px;
    width: 150px;
    vertical-align:bottom;
  }
  style>