Вертикально центрировать SVG в кнопке ::before [закрыто] ⇐ CSS

[Anonymous]

Я пытаюсь внедрить SVG в кнопку Bootstrap 5, используя ::before в CSS:

.btn.login-with.google::before { контент: URL(данные:изображение/SVG+XML;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMjUiIGN5PSIyNSIgcj0iMTciIG ZpbGw9InJlZCIvPjwvc3ZnPg==); отображение: встроенный блок; высота: 18 пикселей; ширина: 18 пикселей; поле справа: 0,5em; Продолжить с Google

Я пробовал использовать vertical-align:center, пробовал my-auto и m-auto, я не профессиональный CSS поэтому я думаю, что мне не хватает чего-то основного.

Похоже, Flexbox справляется со своей задачей, но поскольку я пытаюсь сохранить ощущение начальной загрузки, а не настраивать класс .btn или напоминать себе о добавлении d-flex каждый раз, когда я использую класс .login-with, может ли кто-нибудь помочь мне добиться этого, только изменив классы CSS .login-with и .google пожалуйста (см. jsfiddle).

Это то, чего я ожидаю, если это возможно без flexbox: https://jsfiddle.net/axel50397/hdq926rg/10/

PS: Это собственное приложение, оно будет использоваться в качестве основы для многих других кнопок входа в социальные сети.