在具有多个元素的div中使用svgs

Question

我是新手在CSS中使用svgs。我的目标是将我在下面引用的svg（电池图标）放在item类的div中，垂直居中，在第一种情况下放在子弹的左边（在标记为{{1的项目中）在文本右侧的第二种情况下（在标有foo的项目中）。

我尝试过将图片显示更改为bar，然后插入

inline-block

项目中的

（见下文），但这不起作用。在div中插入svg元素与其他元素一起插入的最佳实践是什么？应该使用<image xlink:href="https://www.svgrepo.com/show/62382/low-battery.svg" />还是span？

＆＃13;

＆＃13;

background-size:contain

＆＃13;

#foo { background: #00FF7F; }
#bar { background: #ff0000;}


.items { text-align: center; font-weight: 500; color: #fff; border-width: 2px;
border-color: #fff; padding: 2px;}


.item, .item-selected{ display: inline-block; font-weight: 500;
  text-align: center;
 vertical-align: middle;
 border-width: 2px;
 background-color: #484848;
 opacity: 0.85;
 border-color: green;
 border-width: 2px;
border-radius: 3px;
padding: 2px;
color: #fff;
cursor: pointer;
}

.item-selected{
background-color: #fff;
color: #181818;

}

.bullet { display: inline-block; margin: 3px 3px 0px 10px;  width: 10px; height: 10px; border-radius: 7px; }
.label { display: inline-block; font-weight: 300;}


image {
  width: 50px;
  height: 50px;
  display: inline-block;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

#foo {
  background: #00FF7F;
}

#bar {
  background: #ff0000;
}

.items {
  text-align: center;
  font-weight: 500;
  color: #fff;
  border-width: 2px;
  border-color: #fff;
  padding: 2px;
}
img {
 vertical-align:middle;
}

.item,
.item-selected {
  display: inline-block;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  border-width: 2px;
  background-color: #484848;
  opacity: 0.85;
  border-color: green;
  border-width: 2px;
  border-radius: 3px;
  padding: 2px;
  color: #fff;
  cursor: pointer;
}

.item-selected {
  background-color: #fff;
  color: #181818;
}

.bullet {
  display: inline-block;
  margin: 3px 3px 0px 10px;
  width: 10px;
  height: 10px;
  border-radius: 7px;
}

.label {
  display: inline-block;
  font-weight: 300;
}

image {
  width: 50px;
  height: 50px;
  display: inline-block;
}

<div class='items'>
  <div class='item' id='wrk'>
    <img src="https://www.svgrepo.com/show/62382/low-battery.svg" height="20" width="40" >
    <div class='bullet' id='foo'></div>
    <div class='label'>foo</div>
  </div>
  <div class='item-selected' id='brk'>
    <div class='bullet' id='bar'></div>
    <div class='label'>bar</div>
    <img src="https://www.svgrepo.com/show/62382/low-battery.svg" height="20" width="40" >
  </div>
</div>