flex布局无法设置图片icon和文本垂直居中对齐问题

本文主要是介绍flex布局无法设置图片icon和文本垂直居中对齐问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

项目场景：

需要实现下面的效果，即图标和文字垂直对齐。

在这里插入图片描述

问题描述

直接使用flex布局并设置垂直居中，发现并没有垂直对齐，图片明显偏上。

.wrapper {display: flex;align-items: center;
}.view-icon {height: 28px;width: 28px;margin-right: 6px;
}.view-text {font-size:24px;color: #999999;
}

原因分析：

其实图片和文字都是居中了的，只是这个图片本身是有上下边距的，也就是图片里的内容并不是撑满图片的。
在这里插入图片描述
如果我们改为一张没有上下留白的图片，发现是对齐的。

但是图片一般是UI给的，我们只能用包含上下留白的图标图片。

解决方案：

既然使用flex的垂直居中，会有问题，那么我们就使用行内元素的vertical-align属性来实现。

注意：如果父元素是flex布局，那么子元素设置vertical-align是不会生效的。

在这里插入图片描述
可以看到，图片的vertical-align默认为baseline，也就是小写"x"的底部，因为图片自身存在的空白区域，导致图片实际显示偏上，
给图片设置样式，让图片整体偏下一点。

 font-size: 28px;vertical-align: -0.2em;

这里的-0.2em根据图片实际留白高度尝试设置合适的值。
在这里插入图片描述
完整代码：

<template><div class="wrapper"><img src="../assets/view.png" alt="" class="view-icon"><span class="view-text">99+人看过x</span></div>
</template><script setup></script><style scoped>
.view-icon {height: 28px;width: 28px;margin-right: 6px;font-size: 28px;vertical-align: -0.2em;
}.view-text {font-size:24px;color: #999999;
}
</style>