Как мне выровнять линию по отношеню к svg-шке?

Question

[Djus1]

Помогите выровнять строку по отношению к изображению.

Вот ссылка: https://juci.com.ua/product/besprovodnaya-zaryadka...

Мне нужно чтобы текст был имел равномерные отступы от красных линий, чтобы был горизотально по центу, по синей линии относительно изображений.

Как здесь:

Буду благодарен если поможете, уже 2 часа с этим парюсь, хочу умереть...

Answer 1

[Ankhena]

Из вашего варианта

.woocommerce-breadcrumb a:after {
    content: url(http://juci.com.ua/wp-content/uploads/2020/07/breadcrumbs_icon-4.svg);
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
}

(!important лишний)

Альтернативы:
- Флексом
- Картинку размещать не в content, а как фон.

Плохие альтернативы:
- Сдвигать абсолютом.
- Сдвигать трансформом.

И лучший вариант:
Хлебные крошки делать списком и псевдоэлемент применять к li. Тогда он не будет кликабельным.

Comments

[Djus1]

Спасибо за ответ!

[Ankhena]

Djus1, умеете выбирать неоптимальные и ненадежные решения.

[Djus1]

Ankhena, ладно, ладно, извини.

[Ankhena]

Djus1, я объясню почему.

Сдвиги на магические числа ненадежны, потому что при смене шрифта или картинки всё уедет.
Абсолюты выводят элемент из потока, трансформ создает новый контекст наложения.
!important уже на этапе верстки говорит о плохом коде, повышает специфичность и усложняет поддержку.

Использовать их при наличии простых надежных решений не имеет смысла.