Html 在div+的链接中垂直居中字体图标；链接有奇怪的可点击区域

我的目标是将一个可点击（链接）的字体图标垂直居中放置在div栏中。它不起作用。相反，图标会粘贴到div的底部

这就是我所尝试的：

#条{
背景色：红色；
}
#条形图>a{
字体大小：100px；
颜色：白色；
背景颜色：绿色；
显示：内联块；
}
#栏>a>svg{
背景颜色：蓝色；
垂直对齐：中间对齐；
}

从

#bar>a>svg

中删除

垂直对齐：中间
，您就可以开始了。另外，在加载之前，请清除缓存，然后按ctrl+F5
键。问题在于
行高
-因为您将字体大小设置为图标的大小，因此也增加了行高（并且行高通常大于字体字母，以允许行间距）

您可以通过降低线条高度以匹配（或小于）图标高度来修复此问题，例如：

#bar > a {
      font-size: 100px;
      line-height:75px;
      /* rest of CSS */
 }

工作片段：


#条{
背景色：红色；
}
#条形图>a{
字体大小：100px；
颜色：白色；
背景颜色：绿色；
显示：内联块；
线高：75px；
}
#栏>a>svg{
背景颜色：蓝色；
垂直对齐：中间对齐；
}
display：阻止SVG并移除垂直对齐？