前提
通常，块级元素负责结构，内联元素负责内容。
内联元素可以在同一行，按照从左至右的顺序显示，不会单独占一行。这就涉及到，同一行盒子中多个内联元素在水平和垂直方向上的对齐方式。
水平方向上，常见的左中右对齐使用 text-align 属性即可实现；而垂直对齐，则使用 vertical-align 属性实现。
例子1：顶部对齐
<style>
p {
background-color: #eee;
border: 2px red solid;
line-height: 120px;
text-align: center;
}
span {
display: inline-block;
line-height: 1.5;
background-color: seagreen;
padding: 5px 10px;
color: #fff;
vertical-align: top;
}
span:first-child {
font-size: 20px;
}
span:last-child {
font-size: 12px;
}
</style>
<p>
<span>顶部<br>对齐</span>
<span>顶部<br>对齐</span>
<span>顶部<br>对齐</span>
</p>
例子2：居中对齐
<style>
p {
background-color: #eee;
border: 2px red solid;
line-height: 120px;
text-align: center;
}
span {
display: inline-block;
line-height: 1.5;
background-color: seagreen;
padding: 5px 10px;
color: #fff;
vertical-align: middle;
}
span:first-child {
font-size: 20px;
}
span:last-child {
font-size: 12px;
}
</style>
<p>
<span>居中<br>对齐</span>
<span>居中<br>对齐</span>
<span>居中<br>对齐</span>
</p>
例子3：底部对齐
<style>
p {
background-color: #eee;
border: 2px red solid;
line-height: 120px;
text-align: center;
}
span {
display: inline-block;
line-height: 1.5;
background-color: seagreen;
padding: 5px 10px;
color: #fff;
vertical-align: bottom;
}
span:first-child {
font-size: 20px;
}
span:last-child {
font-size: 12px;
}
</style>
<p>
<span>底部<br>对齐</span>
<span>底部<br>对齐</span>
<span>底部<br>对齐</span>
</p>
基线
垂直对齐的发生，一定是基于某个参照物的，比如我们把上例中的 vertical-align 属性值设置为 5px，可以猜到，3 个 span 元素一定向上移动了 5px，但是这个移动的初始位置在哪里呢？
例子：
<style>
p {
background-color: #eee;
border: 2px red solid;
line-height: 120px;
text-align: center;
}
span {
display: inline-block;
line-height: 1.5;
background-color: seagreen;
padding: 5px 10px;
color: #fff;
vertical-align: 5px;
}
span:first-child {
font-size: 20px;
}
span:last-child {
font-size: 12px;
}
</style>
<p>
<span>向上<br>5px</span>
<span>向上<br>5px</span>
<span>向上<br>5px</span>
</p>
这个初始位置就是基线( baseline )。
基线是垂直对齐的基础，vertical-align 的默认值便是基线对齐。
根据规范，字母 x 的下边线即为基线。汉字或部分英文字母的下边线要低于字母 x 的下边线，但仍然以字母 x 的下边线为标准。
行盒子的基线
内联元素的垂直对齐都是发生在行盒子当中，因此找到行盒子的基线显得尤为重要。
在这里，又需要提及透明文本节点(1)。这个文本其实可以当作字母 x 去理解，因此，行盒子里面的所有内联元素，都是基于这个透明 x 节点进行垂直对齐的。
*(1)透明文本节点的内容，可以参考：内联元素的两大基石之 line-height
例子1：默认情况下，内联元素都是基线对齐
<style>
p {
background-color: #eee;
border: 2px red solid;
line-height: 120px;
text-align: center;
}
span {
display: inline-block;
line-height: 1.5;
background-color: seagreen;
padding: 5px 10px;
color: #fff;
}
span:first-child {
font-size: 20px;
}
span:last-child {
font-size: 12px;
}
</style>
<p>
<span>基线<br>x对齐</span>
<span>基线<br>x对齐</span>
<span>基线<br>x对齐</span>
</p>
例子2：span 元素基线向上移动 20px
<style>
p {
background-color: #eee;
border: 2px red solid;
line-height: 200px;
text-align: center;
}
span {
display: inline-block;
line-height: 1.5;
background-color: seagreen;
padding: 5px 10px;
color: #fff;
vertical-align: 20px;
}
span:first-child {
font-size: 20px;
}
span:last-child {
font-size: 12px;
}
</style>
<p>
<span>基线<br>x对齐</span>
<span>基线<br>x对齐</span>
<span>基线<br>x对齐</span>
</p>
内联元素的基线
首先，对于标准内联元素( 无论是否有内容 )和匿名内联元素( 文字 )，都是完全遵守基线定义的，即以字母 x 下边线作为基线。
例子：
<style>
p {
background-color: #eee;
border: 2px red solid;
line-height: 120px;
text-align: center;
}
span {
background-color: seagreen;
font-size: 24px;
padding: 5px 10px;
border: 2px #795548 solid;
margin: 2px;
color: #fff;
}
</style>
<p>
x基线<span>x对齐</span><span></span>
</p>
其次，由于历史原因，很多有着内联盒子特点，但又不完全遵循内联盒子规则的元素都统一规划到替换元素之中。同样，替换元素在基线的处理上，和标准内联元素也是大相径庭。
以 img 为代表的替换元素，其基线是 margin 的下边线；类似的还有 iframe、canvas、video、textarea 等。
例子：
<style>
p {
background-color: #eee;
line-height: 120px;
text-align: center;
}
img {
background-color: seagreen;
width: 100px;
border: 5px #795548 solid;
padding: 5px;
margin: 5px;
}
</style>
<p>
x
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="ff.jpg">
</p>
以 input 为代表的替换元素，其基线是元素里面文字的基线( 字母 x 下边线 )，类似的还有 select 等。
例子：
<style>
p {
background-color: #eee;
line-height: 120px;
text-align: center;
}
input {
background-color: seagreen;
line-height: 2;
border: 5px #795548 solid;
padding: 5px;
margin: 5px;
color: #fff;
}
</style>
<p>
x
<input type="text" value="x-hello">
</p>
*现有的规范中，并没有替换元素基线的详细说明，因此在使用这些元素时，会因浏览器不同而表现出差异性，需要多加注意。
最后，对于内联级元素( inline-block 的元素 )，如果元素里面没有内联元素，则该元素的基线就是其 margin 的下边线；如果元素里面有内联元素，则该元素的基线就是元素里面最后一行内联元素的基线：
例子：
<style>
p {
background-color: #eee;
line-height: 120px;
text-align: center;
}
span {
display: inline-block;
width: 50px;
height: 40px;
line-height: 1;
background-color: seagreen;
padding: 5px;
margin: 5px;
color: #fff;
}
</style>
<p>
x
<span></span>
<span>x</span>
</p>
如有错误，欢迎指正，本人不胜感激。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
