HTML5+CSS3_13_垂直对齐方式（vertical-align）

泠泠七弦上111

已于 2024-08-19 09:05:28 修改

阅读量349

点赞数 6

分类专栏： HTML5+CSS3 文章标签： html5 css3 前端

于 2024-08-11 20:51:44 首次发布

本文链接：https://blog.csdn.net/2301_81057751/article/details/141111616

版权

HTML5+CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

效果图

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直对齐方式（vertical-align）</title>
  <style>
    .user {
      background-color: #faebd7;
    }

    .user img {
      /* vertical-align 属性值
      baseline：将元素的基线与父元素的基线对齐，默认值。
      top：将元素的顶部与所在行的顶部对齐。
      middle：将元素的垂直中点与父元素的基线加上父元素 x 高度的一半对齐。
      bottom：将元素的底部与所在行的底部对齐。 */
      vertical-align: middle;
      /* 经常用于让图片和文字的居中对齐 */
    }
  </style>
</head>

<body>
  <div class="user">
    <img src="user.png" alt="头像">
    <span>momo</span>
  </div>
</body>

</html>