vertical-align样式详解

微信扫一扫,分享到朋友圈

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

微信扫一扫,分享到朋友圈

vertical-align样式详解

ubuntu+docker搭建etcd集群

上一篇

OpenKruise v0.5.0 版本发布,支持无损的流式分批发布策略

下一篇

你也可能喜欢

vertical-align样式详解

长按储存图像,分享给朋友