图标和文字错位的解决方法

今天给网站增加图标，发现icon和文字显示错位，但是不知道问题出在哪里，折腾的很久才解决，把解决方法记下，以后再遇到可以翻看此篇文章。之前一直根据网上说的在<g >里添加样式，但是没效果，换到是第一行<svg >添加样式才解决。

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="57px" height="28px" viewBox="0 0 567.000000 283.000000"
 preserveAspectRatio="xMidYMid meet" class="hongbiao">

<g transform="translate(0.000000,283.000000) scale(0.100000,-0.100000)"
fill="#780411" stroke="none">

样式改为下面就能解决

.hongbiao{display:inline-block;vertical-align:middle;}

顺便把搜到的vertical-align介绍也贴下，我的博客主要还是我自己看，vertical-align是一个 CSS 属性，用于设置行内元素（如文本、图片等）在其父元素内的垂直对齐方式。这个属性主要用于控制元素在垂直方向上的位置，以便更好地实现文本排版和设计效果。
vertical-align 的可选值包括：

1. baseline（默认值）：元素的基线与父元素的基线对齐。
2. sub：元素的基线与父元素的下标基线对齐。
3. super：元素的基线与父元素的上标基线对齐。
4. top：元素的顶部与行内元素中最高元素的顶部对齐。
5. text-top：元素的顶部与父元素字体的顶部对齐。
6. middle：元素的中点与父元素基线的中点对齐。
7. bottom：元素的底部与行内元素中最低元素的底部对齐。
8. text-bottom：元素的底部与父元素字体的底部对齐。
9. length：使用具体的长度值（如 px、em 等）来设置元素相对于基线的位置。
10. percentage：使用百分比值来设置元素相对于基线的位置。

需要注意的是，vertical-align 属性仅对行内元素和表格单元格有效。对于块级元素，可以使用其他方法（如 margin、padding、position 等）来实现垂直对齐。