Html 用多元素拟合div中的svg

我不熟悉在CSS中使用SVG。我的目标是将我引用的svg放置在item类divs中电池图标的下方，垂直居中，第一种情况下位于标记为foo的项目中项目符号的左侧，第二种情况下位于标记为bar的项目中文本的右侧

我尝试过使用将图像的显示更改为内联块，并插入

在项目中，请参见下文，但这不起作用。在div中插入svg元素与其他元素内联的最佳实践是什么？是否应使用跨度或背景尺寸：contain

foo{背景：00FF7F；} bar{背景：ff0000；} .items{文本对齐：居中；字体重量：500；颜色：fff；边框宽度：2px； 边框颜色：fff；填充：2px；} .item、.item selected{显示：内联块；字体重量：500； 文本对齐：居中； 垂直对齐：中间对齐； 边框宽度：2倍； 背景色：4848； 不透明度：0.85； 边框颜色：绿色； 边框宽度：2倍； 边界半径：3px； 填充：2px； 颜色：fff； 光标：指针； } .所选项目{ 背景色：fff； 颜色：181818； } .bullet{显示：内联块；边距：3px 3px 0px 10px；宽度：10px；高度：10px；边框半径：7px；} .label{显示：内联块；字体重量：300；} 形象{ 宽度：50px； 高度：50px； 显示：内联块； } 福 酒吧

---

您可以使用img将svg用作图像，然后调整CSS以进行对齐：

福{ 背景：00FF7F； } 酒吧{ 背景：ff0000； } .项目{ 文本对齐：居中； 字号：500； 颜色：fff； 边框宽度：2倍； 边框颜色：fff； 填充：2px； } img{ 垂直对齐：中间对齐； } 项目 .所选项目{ 显示：内联块； 字号：500； 文本对齐：居中； 垂直对齐：中间对齐； 边框宽度：2倍； 背景色：4848； 不透明度：0.85； 边框颜色：绿色； 边框宽度：2倍； 边界半径：3px； 填充：2px； 颜色：fff； 光标：指针； } .所选项目{ 背景色：fff； 颜色：181818； } .子弹{ 显示：内联块； 保证金：3px3px0px 10px； 宽度：10px； 高度：10px； 边界半径：7px； } .标签{ 显示：内联块； 字体大小：300； } 形象{ 宽度：50px； 高度：50px； 显示：内联块； } 福 酒吧