Html 如何将图标与标签垂直对齐？

我试图在列表中垂直对齐一些字体元素。 我尝试了很多方法，比如使用垂直对齐属性和设置相同的字体大小/行高

我看到了一个有趣的答案，但是标签的基线似乎与图标垂直对齐，而不是整个文本本身

ul{
列表样式：无
}
.列表项内容{
填充：10px；
边框：1px纯黑；
}
.图标{
字体大小：14px；
线高：14px；
垂直对齐：中间对齐；
}
.标签{
//垂直对齐：中间对齐；
字体大小：14px；
线高：14px；
}

AAAAA


bbbbbb


中交

尝试直接在伪

：before

元素（图标使用）上设置属性

ul{
列表样式：无
}
.列表项内容{
填充：10px；
边框：1px纯黑；
}
.icon:before.label{
垂直对齐：中间对齐；
字体大小：14px；
线高：1；
}

AAAAA


bbbbbb


中交

.icon:before, .label {
  vertical-align: middle;
  font-size: 14px;
  line-height: 1;
}