vertical-align中的文字究竟在哪？

作者站长头像
站长
· 阅读数 7

vertical-align中的文字究竟在哪？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        background-color: pink;
        font-size: 20px;
      }
      .box img {
        width: 200px;
      }
      .img1 {
        vertical-align: top;
      }
      .img2 {
        vertical-align: bottom;
      }

    </style>
  </head>
  <body>
    <div class="box">
      <span>xxx你好xxxabcdefghijk中文Enmodel"</span> 
      <img class="img1" src="./beauty.jpg" alt="" />
      <img class="img2" src="./kobe01.jpg" alt="" />
    </div>
  </body>
</html>

问题1：然后我设置img1 是top img2 是bottom为啥最后文字是在上面的 vertical-align中的文字究竟在哪？

然后我改了 img1 为bottom img2为top 文字就下来了 这个文字究竟是在哪vertical-align中的文字究竟在哪？

当然还有其他的middle等现象，我也是无法解释的

回复
1个回答
avatar
test
2024-07-01

从标题来看你是不理解 vertical-align 到底起了什么作用，为什么有这么多奇怪的变化我们一点一点来分析一个div没有设置高度的时候，会不会有高度？

  1. 没有内容，没有高度
  2. 有内容，内容撑起来高度

内容撑起来高度的本质是什么呢？◻ 内容有行高（line-height），撑起来了 div 的高度

行高为什么可以撑起div的高度？◻ 这是因为line boxes（行盒）的存在，并且 line-boxes 有一个特性，包裹每行的 inline-level ◻ 而其中的文字是有行高的，必须将整个行高包裹进去，才算包裹这个 inline-level ◻ 行盒一定会想办法包裹住当前行中所有的内容，所以就会有奇奇怪怪的现象

vertical-align 的默认值是 baseline ，使元素的基线与父元素的基线对齐（父元素的基线就是文本的基线）◻ 文本的 baseline 是字母 x 的下方answer image◻ Inline-block 默认的 baseline 是 margin-bottom 的底部（没有，就是盒子的底部） ◻ Inline-block 有文本时，baseline 是最后一行文本的 x 的下方 ◻ baseline(默认值)：基线对齐 ◻ top：把行内级盒子的顶部跟 line boxes 顶部对齐 ◻ middle：行内级盒子的中心点与父盒基线加上 x-height 一半的线对齐 ◻ bottom：把行内级盒子的底部跟 line boxs 底部对齐 好，了解了上面的概念现在我们来看一下现象

  1. 如果什么都不设置默认是基线对齐answer image
  2. 将图片1设置为top，图片1的顶部要跟行盒顶部对齐，而且因为图片1是最高的元素，其他元素会表现为向上移动，当图片2移动到顶部时停止，如下图所示。如果没有图片2，文字就会跑到顶部answer image
  3. 将图片1设置为top，图片2设置为bottom，此时图片2的底部要跟行盒底部对齐，图片2向下移动，文字位置在行盒内发生改变但还是跟基线对齐，只是其他元素对齐改变了行盒内的基线位置。因为行盒要包裹住所有内容所以有这样的表现。answer image
  4. 将图片1设置为bottom，此时图片1跟行盒底部对齐向下移动answer image
  5. 将图片1设置为bottom，图片2设置为top，此时图片2向上移动顶部与行盒顶部对齐answer image包含行内元素的文字如果不设置始终是对齐基线的，其他元素的 vertical-align 的改变导致行盒内基线位置的改变。而本案例中，图片1的高度决定了整个盒子的高度，所以文字的位置看起来会那么奇怪。
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容