CSS—vertical-align

---

vertical-align这个属性，我知道的有三个用途，其中两个好理解，兼容性也比较好，第三个差一些。

• 垂直文本对齐
• 实现上下标
• 行内元素垂直对齐

---

• 垂直文本对齐
• 
  可以在表格单元格内进行文本垂直对齐的设置，参考这里。
  常用的：vertical-align:top、middle、bottom
• dispaly:table-cell
  将元素的display属性设置为table-cell就可以参照上面一样，对元素内的文本进行垂直对齐啦。
  p{
  height:100px;
  width: 100px;
  background: yellow;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  }
• 实现上下标
  设置方法：vertical-align:sub、supper
  #p1{
  font-size: 0.7rem;
  vertical-align: super;}
  #p2{
  font-size: 0.7rem;
  vertical-align: sub;}
  

  X2ABC

  
  

  X2ABC

  
  
  

  效果
  
  为了方便看，我将

  设置了浮动。
  由于vertical-align是设置行内元素垂直对齐，所以该属性应该作用于行内元素上。

• 行内元素垂直对齐
  【观察默认】
  p{
  height:100px;
  line-height: 100px;
  width: 300px;
  background: yellow;
  text-align: center;
  }
  

  HELLO

  
  
  

  vertical-align：baseline（默认）
  
  
  

  参考线
  
  上图是默认的对齐方式：
  在

  内加入行内元素
  利用元素高度等于行高，进行文本居中，这就说名此时黄色背景区域里只是一行文本。
  发现img这里行内元素，并没有进行文本居中，首先他不是文本，其次他的对齐方式，是参照已经文本对齐的HELLO的基线对齐。
  再看多行文本下,取消了行高设置，对span元素进行了背景加蓝，方便观看。
  

  

  多行效果
  
  【需要知道】
  行内文本元素，会继承其父元素的行高。导致行内文本元素的高度被扩高。所以设计界面时别忘记这一点，导致忽略行内元素的真实行高。
  【测试未设置行高】
  在未设置行高的情况下，行内元素的真实高度即为图中蓝色背景区域。
• vertical-align: bottom
  img{vertical-align: bottom; //与行内最低元素底部对齐}
  span{background: blue; }
  
  

  效果：对齐的是底部不是基线
• vertical-align: top
  img{vertical-align: top; //与行内最高元素顶部对齐}
  span{background: blue; }
  
  

  效果：对齐顶部
• vertical-align: middle
  img{vertical-align: middle; //使图片位于该行的垂直中间}
  span{background: blue; }
  
  

  效果，图片居中
  
  乍一看，图片没有变化，反倒文本变了，对于top、bottom、baseline，是设置行内元素垂直对齐，但是middle是设置自身相对所在行居中，但是该行最高的元素就是图片，所以图片本身就是居中，而文本则恢复默认的对于基线对齐。
  这时，同时对span这个蓝色背景的文字设置span{vertical-align: middle; }发现蓝色背景的图片也居中了。
  
  

  效果
  
  【测试设置行高】
  这时候行内文本元素集成行高，其高度充斥这一行。
  p{line-hight:30px;}
  
  

  多了15px？
  
  因为图片本身有35px，由于默认时，对齐基线，图片为了对齐基线，由于自身又太高，就扩高了高度。再加上内部span继承了行高，观察文本下面有留白，即是设置完行高后，上下腾出的留白。
• vertical-align:top
  img{vertical-align: top; }
  
  

  效果
  
  行内最高元素当然是继承了行高后行内文本么，怎么看上去，并没有使得大家顶部对齐啊？
  其实已经对齐了，因为文字上的留白，是由于行高设置的原因，还有图片要对齐于行内文本（一定得对齐加上留白的文本）。
• vertical-align:bottom
  img{vertical-align: bottom; }
  
  

  原因就是，设置行高后，有留白
• vertical-align:middle
  img{vertical-align: middle; }
  
  

  看起来貌似没啥区别
  
  没区别的原因是因为，图片很高会扩充高度，文本设置行高后，上下有留白，这么解释，可能还不太懂上图的原因。
  图片设置居中与该行，文本保持原来的位置，文本下方貌似比较多，是因为图片撑的。

---

【还有……】
这两个得相对于设置行高的bottom与top做对比

• vertical-align:text-top
  
  

  左：vertical-align:text-top 右：vertical-align: top
• vertical-align:text-bottom
  
  

  左：vertical-align:text-bottom 右：vertical-align: bottom

看出差别了吧，对齐时忽略行高导致的留白。

别忘记了兼容：IE7及其以前版本表现不好。利用该属性设计界面时，注意测试IE6、7

貌似图片越来越多啦，因为我口才不好，形容不出来啊