css的vertical-align是怎么对齐的？

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

根据查到资料 行框中对齐方式的确认：     a）首先确认该行内的基准元素，取line-height值为最大值的元素作为基准；     b）其他文本向基准元素对齐

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 400px;
        background: red;
        width: 400px;
        border: 1px solid;
        margin: 100px auto;
        text-align: center;
      }
      #wrap:after {
        content: "文本2";
        display: inline-block;
        height: 100%;
        width: 50px;
        background: pink;
        vertical-align: bottom;
      }
      #wrap img {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      文本1
      <img src="img/img2.jpg" width="150" />
    </div>
  </body>
</html>

效果如下：css的vertical-align是怎么对齐的？如上图文本2是行内最高的元素，它自身是跟谁对齐？， 图片设置的mddle为啥跑到下面去了，求大神解答

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

https://www.zhangxinxu.com/wo...推荐阅读

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容