1. vertical-align 垂直对齐
- vertical-align设置或检索对象内容垂直对齐的方式。
垂直对齐:vertical-align:baseline | middle | top | bottom
选择器 {
/* 默认的是基线对齐 */
vertical-align: baseline;
/* 图片的中线 与 文字的中线对齐 垂直对齐 */
vertical-align: middle;
/* 让图片的顶线 与 文字的顶线对齐 */
vertical-align: top;
/* 让图片的底线 与文字的底线对齐 */
vertical-align: bottom;
}
- 注意:vertical-align不影响块级元素中的内容对齐,它只针对行内元素或者行内块元素,通常用来控制图片/表单与文字的对齐。
2. 清除图片底侧的空白间隙
- 原因:由于图片或表单等行内块元素,他的底线会和父级盒子的基线对齐,所以底侧会有空白间隙。
- 解决办法:改变图片默认基线对齐的样式(
vertical-align: top | bottom | midden;
都可以),或者是给图片添加diaplay: block;
转换为块级元素就不会存在问题了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
border: 1px solid red;
}
.box img {
/* display: block; */
width: 100px;
vertical-align: top;
}
</style>
</head>
<body>
<div class="box">
<img src="image/touxiang.jpg">
</div>
</body>