如何解决SVG图标与文本CSS垂直居中对齐失效问题？

方法一：使用Flex布局（推荐） #

Flex是实现元素对齐最省心的方案，只需给容器添加Flex相关样式：

.title {
  display: flex;
  align-items: center; /* 实现垂直居中 */
}
.icon {
  height: .9rem;
  margin-right: 0.25rem;
}

对应的HTML代码无需修改：

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />

<div class="title">
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 9.5 17" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M1 1l7.5 7.5-7.5 7.5"></path>
</svg>
  <span>ABOUT ME</span>
</div>

方法二：给文本也添加vertical-align: middle #

如果不想用Flex，只需给同级的文本元素也设置vertical-align: middle，让两者中线对齐：

.icon{
    display: inline-block;
    vertical-align: middle;
    height: .9rem;
    margin-right: 0.25rem;
}
.title span {
    vertical-align: middle;
}

内容的提问来源于stack exchange，提问作者Hans Felix Ramos