HTML(23)——垂直对齐方式

垂直对齐方式

属性名:vertical-align

属性值 效果
baseline 基线对齐(默认)
top 顶部对齐
middle 居中对齐
bottom 底部对齐

默认情况下浏览器对行内块,行内标签都按文字处理,默认基线对齐

导致图片看起来会偏上,文字偏下。

示例:

复制代码
   <style>
        div {
            border: 2px solid #333;
        }

        img {
            height: 200px;
        }
    </style>
</head>

<body>
    <div>
        <img src="./images/a.jpg">
        兄弟你好香
    </div>
</body>

可以看到图片的下方还有空白。接下来在img内添加vertical-align: middle;

复制代码
        img {
            height: 200px;
            vertical-align: middle;
        }

发现图片下方空白消失,并且文字也移动到了中间。

相关推荐
yngsqq4 分钟前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk6 分钟前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan8 分钟前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE12 分钟前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年14 分钟前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net
Zsnoin能24 分钟前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房25 分钟前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
摆烂为不摆烂29 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue7729 分钟前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor
伟笑1 小时前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js