原理比较简单就不上图片了
你也许听说过在行元素中使用vertical-align: middle; 可以实现居中对其，但实际使用上，常常没有作用。
其实行元素有四条线分别是：
- 顶线
- 中线
- 基线
- 底线
默认行元素是基线对齐的（两个元素的基线在同一高度）
下面代码相当于图片的基线和文字的中线对齐（图片的基线就是中线）
<img src="xxx">
<span style=" vertical-align: middle;">文字</span>
但是两个元素都是文字的话，两个元素都要加上 vertical-align: middle;才可以生效上下居中对齐的效果文章来源：https://www.toymoban.com/news/detail-710435.html
<span style=" vertical-align: middle; font-size: 30px;">ABC</span>
<span style=" vertical-align: middle; font-size: 20px;">ABC</span>
这样布局很乱，有多个元素的情况下要不停地vertical-align: middle;不是很好用
推荐使用flex display: flex;align-items: center;文章来源地址https://www.toymoban.com/news/detail-710435.html
<div style="display: flex;align-items: center;">
<span style=" font-size: 30px;">文字</span>
<span style="font-size: 20px;">文字</span>
<span style="font-size: 10px;">文字</span>
</div>
到了这里，关于HTML图片和文本居中对齐的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
