找回密码
 立即注册

css垂直对齐方式vertical-align [复制链接]

admin 2025-5-20 15:59:43 99
css垂直对齐方式vertical-align

1.jpg

  1. <title>垂直对齐方式</title>
  2.   <style>
  3.     div {
  4.       border: 1px solid #000;
  5.     }
  6.     img {
  7.       /* vertical-align: middle; */
  8.       /* 顶对齐:最高内容的顶部 */
  9.       /* vertical-align: top; */
  10.       /* 底对齐:最高内容的底部 */
  11.       /* vertical-align: bottom; */
  12.       /* 因为浏览器把行内块、行内标签当做文字处理,默认按基线对齐 */
  13.       /* 效果:图片img的底下有空白,转块级不按基线对齐,空白就消失了 */
  14.       display: block;
  15.     }
  16.   </style>
  17. </head>
  18. <body>
  19.   <div>
  20.     <img src="./images/1.webp" alt="">
  21.     <!-- 我是谁?我在哪? -->
  22.   </div>
  23. </body>
复制代码
1.jpg

2.jpg 3.jpg

随机推荐

0 回复

发布新话题
搜索
返回顶部