垂直对齐方式
属性名:vertical-align
属性值 | 效果 |
---|---|
baseline | 基线对齐(默认) |
top | 顶部对齐 |
middle | 居中对齐 |
bottom | 底部对齐 |
默认情况下浏览器对行内块,行内标签都按文字处理,默认基线对齐
![](https://img-blog.csdnimg.cn/direct/5ec75a43139a4d1abef1d32313cd9073.png)
导致图片看起来会偏上,文字偏下。
示例:
<style>
div {
border: 2px solid #333;
}
img {
height: 200px;
}
</style>
</head>
<body>
<div>
<img src="./images/a.jpg">
兄弟你好香
</div>
</body>
![](https://img-blog.csdnimg.cn/direct/6c8e35a775444c48a87bf84b7d15dd25.png)
可以看到图片的下方还有空白。接下来在img内添加vertical-align: middle;
img {
height: 200px;
vertical-align: middle;
}
![](https://img-blog.csdnimg.cn/direct/fd11adb16871497ebd8d608d9c283647.png)
发现图片下方空白消失,并且文字也移动到了中间。