在下才疏学浅，不足之处，还请多多指教。
vertical-align 是css中很有用的一个属性，常用在checkbox和文字的对齐，图片的对齐等位置。
需要注意的是：需要有一个元素属于 inline 或 inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用，其实很好理解，为 block 的元素直接独自占一行，不需要对齐。
常见的 vertical-align用法：middle（中线对齐），top(把元素的顶端和最高的元素顶端对齐)，2px(上下的高度)。
见如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test{
vertical-align:2px;
}
</style>
</head>
<body>
<span>
<input type="checkbox">
<label class="test">记住我</label>
</span>
</body>
</html>
执行效果如下
接下来看一个图片对齐的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
width: 600px;
height:300px;
vertical-align:middle;
}
</style>
</head>
<body>
<img src="../jsmode/img/1.jpg" >123213
<span class="test">记住我</span>
</body>
</html>
执行效果如下
通过demo，我们知道 img，span是 行间元素
其实块级元素是为数不多的：<div><h1><p><table><ul><from>
时间： 2024-10-14 16:59:20