设为首页收藏本站
联系我们切换到宽版

 找回密码
 立即注册
金黑网络»首页 › 源码编程区 › 前端教程 › html5教程 › css垂直对齐方式vertical-align
返回列表 发新帖

css垂直对齐方式vertical-align

[复制链接]
admin 发表于 2025-5-20 15:59:43 | 显示全部楼层 |阅读模式
css垂直对齐方式vertical-align

1.jpg

  1. <title>垂直对齐方式</title>
  2.   <style>
  3.     div {
  4.       border: 1px solid #000;
  5.     }

  7.     img {
  8.       /* vertical-align: middle; */

  10.       /* 顶对齐：最高内容的顶部 */
  11.       /* vertical-align: top; */

  13.       /* 底对齐：最高内容的底部 */
  14.       /* vertical-align: bottom; */

  16.       /* 因为浏览器把行内块、行内标签当做文字处理，默认按基线对齐 */
  17.       /* 效果：图片img的底下有空白，转块级不按基线对齐，空白就消失了 */
  18.       display: block;
  19.     }
  20.   </style>
  21. </head>
  22. <body>
  23.   <div>
  24.     <img src="./images/1.webp" alt="">
  25.     <!-- 我是谁？我在哪？ -->
  26.   </div>
  27. </body>
复制代码
1.jpg

2.jpg 3.jpg

回复

举报

返回列表 发新帖

QQ|网站地图|Archiver|手机版|金黑网络 ( 粤ICP备2021124338号 )

网站建设，微信公众号小程序制作，商城系统开发，高端系统定制，app软件开发，智能物联网开发，直播带货系统等

Powered by Www.Jinhei.Cn

Copyright © 2013-2024 深圳市金黑网络技术有限公司 版权所有

快速回复 返回顶部 返回列表