CSS设置小字号后flex布局下文本与SVG无法垂直居中如何解决？

问题原因 #

• 当前仅在最外层.parent元素设置了flex居中，居中对象是.parent的直接子级div，包裹图片和文本的a标签默认是行内元素，内部的img和span默认按vertical-align: baseline（基线）规则对齐。
• 当span字体缩小为0.8em后，其行高、基线位置和img的基线位置不匹配，最终出现上方多余间隙的错位效果。

修复方案 #

方案1（最稳妥）：给a标签设置flex布局统一处理内部对齐 #

改动最小，兼容性好，后续调整内部元素间距也更方便：

a {
  text-decoration: none;
  /* 新增以下2行 */
  display: inline-flex;
  align-items: center;
}
/*Parent div*/
.parent {
  width: 20vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1vw;
  background-color:skyblue;
}
/*Svg*/
.parent img {
  width: auto;
  height: 3vh;
  margin-right: 10px;
  background-color: rosybrown;
}
/*Text*/
span {
  font-size: 0.8em;
  background-color: seagreen;
}

方案2（不改动a标签布局模式）：统一设置行内元素对齐规则 #

给a标签内部的img和span都指定垂直对齐方式即可：

/* 在原有CSS基础上新增以下规则 */
.parent img, .parent span {
  vertical-align: middle;
}

内容的提问来源于stack exchange，提问作者Yunao