9.5 垂直对齐vertical-align
属性vertical-align设置inline-level元素在当前line box内的垂直对齐方式。vertical-align设置对块级元素无效。
开发错误DevError010：乱用vertical-align。垂直对齐包括多种细分场景，需分清再使用。
9.5.1 对齐方式1：基线对齐
vertical-align: baseline;
vertical-align默认值baseline表示基线对齐，即inline-level元素在line box内基线对齐。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
body{
font-family: Arial, Helvetica, sans-serif,'Microsoft Yahei',simsun;
font-size: 12px;
line-height: 1.5;
color: #808080;
}
.span1{
color: #0aaa76;
}
.span2{
color: #4aa6fc;
}
.span3{
color: #ed7d31;
}
.span1{
vertical-align: baseline;
}
</style>
</head>
<body>
<div>
<span class="span1" style="font-size: 12px;">xbjc小步教程</span>
<span class="span2" style="font-size: 30px;">xbjc小步教程</span>
<span class="span3" style="font-size: 50px;" >xbjc小步教程</span>
<span class="span4" style="font-size: 14px;">xiaobuteach.com小步教程</span>
<span class="span2" style="font-size: 30px;">xbjc小步教程</span>
</div>
<div>第2块</div>
</body>
</html>
运行效果。无论字体大小，各个x的底部对齐。
9.5.2 对齐方式2：数值
vertical-align : len;
len表示长度，例如20px。元素相对于原位置上下移动。正值上移，负值下移。
.span1{
vertical-align: 30px;
}
运行效果与示意图
9.5.3 对齐方式3：顶部对齐与底部对齐
顶部对齐表示元素顶部与所在line box顶部（bounds top line）对齐。示例代码。
.span1{
vertical-align: top;
}
.span4{
vertical-align: top;
}
运行效果
span1与span4分别在所在line box内顶部对齐。底部对齐vertical-align: bottom同理。
基线对齐与数值对齐属于与基线相关，顶部对齐与底部对齐属于与基线无直接相关。
9.5.4 可替换元素
可替换元素包括两种类型。
（1）src类型。img、video、iframe等元素，由src属性指定加载外部文件，元素内容不是HTML代码指定，由外部文件内容进行替换。
特点：表面display: inline但具有inline-block的实质，能够设置宽高。
（2）content类型。伪元素::before与::after通过content属性添加内容，也属于可替换元素。元素内容不在HTML代码定义，而是CSS定义内容进行替换。伪元素可设置display: inline或block，所以可替换元素也分inline-level可替换元素与block-level可替换元素。
有时说可替换元素仅指src类型的可替换元素，不包括content类型。
接下来研究图片这一可替换元素的垂直对齐。
9.5.5 图片img的默认垂直对齐
1、图片的基线
文本在字体设计时有基线，图片有基线吗？可替换元素的基线位置在盒子的底部。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
body {
font: 20px/1.5 Arial, 微软雅黑;
margin: 10px;
}
.div1 {
border-top: 1px solid #4aa6fc;
border-bottom: 1px solid #4aa6fc;
}
.span1 {
border-top: 1px solid #ed7d31;
border-bottom: 1px solid #ed7d31;
}
.image1 {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="div1">
<span class="span1">gx</span>
<img class="image1" src="image/no-middle.png">
<span>xiaobuteach.com</span>
</div>
</body>
</html>
运行效果
当前效果。图片底部作为基线位置进行基线对齐，它与x的底部对齐。
两处空白。图片底部与行盒底部（下方蓝色）存在两段空白间距：第1处是x底部与下方桔线的空白，这是字体设计字符时留白。第2处是下方桔线与下方蓝色的空白，这是因为line-height设置产生行之间的空白L/2。
尽量避免图片出现在IFC。实际项目较少出现文本与图片真正在同一line box的情况，建议尽量使用列式布局或独立块将它们隔离。
IFC去除图片下方空白的方法1：图片设置底部对齐vertical-align: bottom。
2、div内只有图片时下方也存在空白
删除div内其它文本，即div内只放图片元素。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
body {
font: 20px/1.5 Arial, 微软雅黑;
margin: 10px;
}
.div1 {
border-top: 1px solid #4aa6fc;
border-bottom: 1px solid #4aa6fc;
}
.image1 {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="div1">
<img class="image1" src="image/no-middle.png">
</div>
</body>
</html>
运行效果
下方同样会出现基线对齐产生的空白，详情见下节“假想strut”。
去除图片下方空白方法2：当图片单独一行时，设置display: block，不再有IFC及对齐问题。
去除图片下方空白方法3：当图片单独一行时，设置块容器font-size: 0;使strut高度为0。
9.5.6 对齐方式4：垂直居中对齐
一行内的图片与文本需要垂直居中对齐时，使用垂直居中middle。
middle表示当前元素（图片）的“中间位置”（即垂直平分线）对齐文本的“中间位置”（即strut的half-x线），图片中间位置与文本中间位置的计算不同，这是CSS按照日常需求所做的设计。half-x线指strut基线位置+x-height高度一半的位置，也就是文本的“中间位置”，x-height高度指小写x顶部到底部的距离。文本的“中间位置”没有采用bounds的垂直平分线位置，符合文本的排版特点；图片的“中间位置”就是垂直平分线位置。
img的居中对齐
.image1{
vertical-align: middle;
}
运行效果
vertical-align: middle通常应用于图片或inline-block等元素，不会用在inline元素，因为这不符合“中间位置”的设计。middle对齐与基线有关。
开发错误DevError011：将vertical-align: middle乱用于block元素与inline元素（文本）。
9.5.7 对齐的移动错觉
上述示例明明设置图片垂直居中，实际效果是其它inline元素垂直居中，导致移动错觉：vertical-align在某些场景是在设置其它元素的垂直对齐方式？
移动错觉的原因。设值middle使line box发生两次变化：（1）图片居中对齐使line box顶线下移，（2）line box整体上移，形成最终效果。vertical-align含义仍是移动当前元素。
