HTML(23)——垂直对齐方式 - 码农知识堂 - 文章详情页

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;
        }
```
发现图片下方空白消失，并且文字也移动到了中间。
相关阅读:
[0xgame 2023] week2-Crypto
Qt5.12.12构建64位QMYSQL数据库驱动&“driver not loaded”
山东省专精特新申报条件是什么？各地市分别补贴多少钱？
【技术精粹】AppGallery Connect开发精品实战课
 CAN总线学习笔记 | CAN基础知识介绍
 【解决】阿里云香港服务器怎么样？cn2性能测试
 ceph 14.2.10 aarch64 非集群内客户端挂载块设备
 【Java】Groovy 语言应用场景以及积累
 循环语句
 大模型日报｜20 篇必读的大模型论文
原文地址：https://blog.csdn.net/m0_74386799/article/details/139919455