vertical-align样式详解

日常对元素的概念懵逼

一直以来 就光记的是遇见img 和文本同行时候要对齐的话就给img设置个vertical-align:middle或者别的什么就可以了的. 还没有好好的了解具体做什么. 直到有人问我为什么不能给文本设置vertical-align的时候, 脑瓜子嗡嗡嗡的,就几天前学习的时候完全没去想过这个问题, 就去翻了翻查了查,总算是理解了.

这里就给大家说说每个vertical-align的值是干嘛用的

这里就给大家说说行内元素和行内块元素吧,先不提表格单元格的值

相对父元素的值

• baseline 目前设置的元素的基线与父元素的基线对齐
  X为父元素内容, 另外两个是子元素内容.baseline 是默认样式,因此没有赋值
  
• sub 该元素基线与父元素的下标基线对齐
• super 该元素基线和父元素的上标基线对齐
• text-top 使元素的顶与父元素的字体顶部对齐.
  和明显的可以看到"你好啊"字样和父元素的你对齐
  
• text-bottom 使元素的底部与父元素字体的底部对齐
• middle 使元素的中部与父元素的基线加上父元素x-height的一半对齐.

相对行的值

• top 使元素及其后代元素的顶部与整行的顶部对齐。
  这里可以看到给img设置top和给span便签设置top,会呈现出两种不同的结果,这也是为什么我们去除图片和文字的上下间隙的时候,会选择去设置vertical-align的值,而不是去设置文本的vertical-align.
  其实这个不难理解,因为父元素的高度是由图片撑开的,结合top值的定义. 看顶部的时候抛去图片撑开的原因,整行的顶部就是文字撑开的, 因此造成文字上移现象.但是如果给span标签一个vertical-align:top的话, 由于盒子被img撑开,该span元素要去和这行的高度对齐,因此就会造成这是这个元素上移其他元素还是基线对齐.
  
  
• bottom 使元素及其后代元素的底部与整行的底部对齐。

默认值为: baseline
适用于 inline inline-block table-cell