说明：（1）设置为baseline或middle时，都是与父元素里的子文本节点x位置有关，即使没有写x也存在这样一个空间概念，可以理解为以下书写：
<div>
x // baseline或middle时都是以这个x为标准对齐，即使没有写它，也会有这么一个空间概念
<span>xxx</span> // span标签里的内容是以父元素div里的x为对齐标准
</div>
（2）设置为top或bottom时，只与行框盒子的上下边界有关，与父元素中的x不再有关 。举例如下：
<style>
body {
background-color: gold;
}
#box {
width: 1200px;
padding: 0 50px;
font-size: 100px;
color: white;
background-color: black;
}
span {
vertical-align: bottom;
color: black;
font-size: 50px;
background-color: yellowgreen;
}
</style>
<div id="box">
中文aljx
<span>中文aljx</span>
</div>
显示效果如下：
文章插图
我们已知行框盒子上、下边界要包裹住所有内联盒子的上、下边界，此时白色字体的匿名内联盒子高度撑起行框盒子的上下最大高度，设置span标签以bottom垂直对齐，其底边就与行框盒子的底边在一条线上 。
2.3 line-height和vertical-align的具体应用
（1）设置图片垂直居中 。
<!DOCTYPE html>
<html>
<head>
<style>
【一文搞懂CSS line-height和vertical-align】div {
width: 500px;
height: 500px;
border: 1px solid black;
text-align: center;
/* 1.设置line-heihgt=height */
line-height: 500px;
}
img {
/* 2.设置图片居中 */
vertical-align: middle;
}
</style>
</head>
<body>
<div>x<img src=https://www.isolves.com/it/cxkf/yy/CSS2/2023-06-30/"./233.png" />
</body>
</html>
显示效果如下：
文章插图
如果单独设置line-height和height高度一致并不能使图片垂直居中，因为图片底边会和父元素里的x底边对齐，所以要要实现图片垂直居中，这2个属性需要配合使用 。
（2）设置多行文本垂直居中 。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 300px;
/* 1.设置line-height=height */
line-height: 300px;
border: 1px solid black;
}
span {
/* 2. 去设置span让span变成行内块状元素，这样就能将span当成一个整体来对待 */
display: inline-block;
border: 1px solid green;
/* 3.line-height具有继承性需要将其继承下来的line-height去掉 */
line-height: normal;
/* 4.让span和父元素的x的1/2处对齐 */
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<span>
你的眼睛可真好看，里面有晴雨，日月，山川，江河，云雾，花鸟……但我的眼睛更好看，因为我的眼里，有你 。——余光中
</span>
</div>
</body>
</html>
显示效果如下：
文章插图
上面我们有举例说明单独设置line-height可以实现单行的文本垂直居中，但是这种多行文本的垂直居中，我们就需要配合vertical-align: middle来实现垂直居中效果 。
总结
在具体的运用中，要实现单行文本的垂直居中，设置line-heihgt与height的值相同就可以实现 。但如果要实现图片或多行文本的垂直居中，我们就需要将line-height与vertical-align一起共同使用才能实现居中效果 。
推荐阅读
- 图文结合带你搞懂GreatSQL体系架构
- 什么是商用密码？数字时代商用密码为何重要？一文解读
- AlphaDev将排序算法提速70%！C语言库作者一文详解DeepMind最新AI
- 太原得一文化广场营业时间 太原得一文化广场
- |20万赌黄花梨木头，居然一文不值，当场崩溃
- 一文解决所有「语言模型」疑问：能不能训多个epoch？怎么微调效率高？需要多少条数据？
- 一文看懂显卡的显存容量/频率/位宽/带宽
- 一文看懂脑机接口未来的无限可能
- 新电脑如何磁盘分区？一文看懂五分钟搞定
- 一文讲透微积分的本质