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>
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
