Расположение значка SVG как изображения в стиле списка

Question

Есть ли быстрый и простой способ для меня вертикально центрировать иконку SVG с соответствующим текстом?Я был в состоянии заставить это быть близко, но я хотел бы подтолкнуть это немного вниз. Это так близко, как у меня

Вот как я это реализую:

HTML:

<ul class="list-goals">
<li>Some text for li number one</li>
<li>Some text for li number two</li>
<li>Some text for li number three</li>
</ul>

CSS:

    .list-goals li {
    margin-bottom: 1rem;
    background: url(../images/trophy.svg) no-repeat left top;
    padding: 0px 0 3px 24px;
}

Полагаю, я всегда мог бы использовать png со встроенными отступами, но я бы предпочел придерживаться моего SVG и применять позиционирование или заполнение непосредственно к значку SVG.

Спасибо за помощь!

Answer 1

Просто используйте CSS-свойство background-position, чтобы переместить изображение туда, куда вы хотите.

Вот простой пример (с использованием изображения URI данных, но он также будет работать с внешним файлом):

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;
}

<p>ok:</p>
<ul class="ok">
<li>Text</li>
</ul>
<hr />
<p>better:</p>
<ul class="better">
<li>Text</li>
</ul>

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 справа):