将SVG图标定位为列表样式图像

Question

我是否可以快速便捷地将SVG图标与相应的文本垂直居中？我能够使它接近，但是我想将其微调一下。 This is as close as I've got

这是我的实现方式：

HTML：

String

CSS：

Toast

我认为我可以始终使用带有内置填充的png，但我宁愿坚持使用svg并将定位或填充直接应用于svg图标。

感谢您的帮助！

Answer 1

我知道这是一个迟到的答案，但你也可以试试这个。

li { list-style-image: url(img/iphone.svg); } 

您无需执行任何其他操作，因为 SVG 应用了默认间距。

Answer 2

给出这个简单的SVG示例：

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
  <style type="text/css">
    circle:hover {fill-opacity:0.9;}
  </style>
  <g style="fill-opacity:0.7;">
    <circle cx="6.5cm" cy="2cm" r="100" style="fill:red; stroke:black; stroke-width:0.1cm" transform="translate(0,50)" />
    <circle cx="6.5cm" cy="2cm" r="100" style="fill:blue; stroke:black; stroke-width:0.1cm" transform="translate(70,150)" />
    <circle cx="6.5cm" cy="2cm" r="100" style="fill:green; stroke:black; stroke-width:0.1cm" transform="translate(-70,150)"/>
  </g>
</svg>

如果我将viewBox更改为viewBox="0 -20 600 600"，它将使图像向下移动-20个单位。结果将是在浏览器中显示的（右侧为-20）：

Answer 3

只需使用{"error": "token_expired"} CSS属性将图像移动到所需位置即可。

这是一个简单的示例（使用数据URI图像，但对于外部文件也一样）：

background-position

li {
    font-size: 30px;
    list-style-type: none;
    margin-bottom: 1rem;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiID8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGQ9Ik0wIDAgMjAgMTAgMCAyMFoiIGZpbGw9IiNhYWEiLz48L3N2Zz4=) no-repeat left top;
    padding: 0px 0 3px 24px;
}

ul.better li {
  background-position: left 4px;
}