用织梦做企业网站生意参谋官网
垂直对齐方式
属性名：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;}
发现图片下方空白消失，并且文字也移动到了中间。