简单理解vertical-align属性和基线

时间 2020-04-05

标签简单理解 vertical align 属性基线繁體版

原文原文链接

　　vertical-align属性主要用于改变行内元素的对齐方式，对于行内布局影响很大，若是不了解的话，咱们开发调整样式的时候很容易出错。html

　　网上关于这个属性的原理说得非常复杂，看一眼就让人以为望而生畏，并且大可没必要彻底理解其原理，只要懂得其规律，咱们足够使用便可，下面把个人理解分享给你们：布局

　　基线测试

　　要了解vertical-align属性，必须懂得基线，怎么理解基线呢？字体

　　一、咱们写网页是在一个矩形的显示屏上，常常是一行一行来布局，不可避免的是一行中会有多个内容，那么这行内容是如何上下对齐的呢？答案就是默认让他们的基线对齐。spa

　　二、各类字体、图片、行内html元素等可展现的内容都有各自的基线，要想知道具体内容的基线咱们能够找一个简单的参照物：小写字母“x”，为何找它呢？由于英文字母的基线刚好就是小写"x"的最下方，比较容易看出。htm

　　知道了以上两点咱们就能够很容易知道其余内容元素的基线位置了，把其余元素和小写“x”放在一行展现一下就一眼能够看出了：blog

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      border: 1px solid cyan;
      font-size: 30px;
    }
    div .span1 {
      display: inline-block;
      background-color: green;
    }
    div .span2 {
      display: inline-block;
      overflow: hidden;
      background-color: green;
    }
  </style>
</head>
<body>
  <div>
    x
    <img src="./demo.jpg" alt="">
    汉字
    <input type="text">
    <button>按钮</button>
    <span class="span1">span1</span>
    <span class="span2">span2</span>
  </div>
</body>
</html>

　　如上图红色为该行元素基线，能够发现图片和overflow:hidden样式的元素的基线位置是最下方，中文、输入框和button按钮的基线位置都在中下方的位置。能够看出，这些行内元素的排列是先按基线上下对齐，而后把父元素撑开。排序

　　值得注意的一点是，若是咱们直接往div中放入一个图片，会发现图片底部距离div的下方有一个空隙；这是由于行内元素各自基线对齐之后还要和父元素的字体基线保持一致，换句话说：每一个行内元素的基线都要向父元素字体基线看齐。当父元素的行高和字体大小样式改变的时候，会使得父元素字体基线位置改变，从而使得行内元素的位置总体上下移动。虽然咱们只看到了一个图片没有看到字，可是父元素有默认的line-height和font-size，也会悄悄地影响布局，你会发现再往div中放入了一个小写字母“x”，以下图，它的下方恰好占据了空隙的位置。因此知道了这个缘由，想去掉这个空隙的话，只须要把父元素的line-height和font-size设置为0，或者把图片设置成块级元素，让它独占一行就能够了。一样的，若是div中直接放入一个input输入框，输入框上方也会有个空隙，与此相似，只是图片和输入框的基线位置不一样罢了。图片

vertical-align属性开发

　　了解了上述行内元素的排序原则，咱们可能会有个疑问：若是咱们须要某些行内元素不按照基线排列怎么办？答案就是使用vertical-align属性。

　　首先，vertical-align属性是针对行内元素才有效果，它改变了当前行内元素和父元素字体二者之间的对齐方式，默认值是baseline，即二者基线对齐，如上面咱们测试的同样。

　　关于各个属性值可参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align，可简单在div中加入小写字母“x”和一张图片分别切换属性进行验证便可。

　　回到上面提到的div中图片下方空隙的问题，只须要设置图片的vertical-align：bottom，这样会使得图片的底部和整行的底部对齐，也就不会有空隙了。

　　有两个属性稍做解释：

　　一、当设置属性为"%"的时候，指的是当前行内元素的line-height属性值的占比，能够设置成正负值，行内元素基线相对父元素字体基线上下移动这个百分比的距离。以下图，设置图片vertical-align: 50%; line-height: 30px; 原本图片最下方应该和"x"底部对齐的，如今上移了15px，若是是-50%，就会相对下移15px。固然也能够直接设置为length，vertical-align：15px;效果也是同样的。

　　二、当设置属性为“middle”的时候，行内元素中间位置会和父元素字体基线上方1/2"x-height"位置对齐，“x-height”其实就是父元素中小写字母“x”的高度，简单来讲，就是行内元素的中间位置会和父元素中的小写字母“x”的中间位置（x的交叉点）对齐，就至关于二者中间对齐了。