Выровняйте изображение по тексту так же, как flex с помощью встроенного блока. ⇐ CSS

[Anonymous]

Я пытаюсь выровнять изображение по центру по вертикали с помощью встроенного блока. Я делаю это, потому что хочу, чтобы значок всегда переносился на первую строку текста, когда текст переносится на новую строку, а не выравнивался по центру всего блока.
проблема, с которой я столкнулся, заключается в том, что когда все находится в одной строке,вертикальное выравнивание: middle не центрирует изображения по вертикали так же, как display: flex и align-items: центр делает. В результате это приводит к тому, что вещи выглядят непоследовательными, когда мне нужно переключаться между ними. Я приложил скриншоты, так как вы можете видеть, что верхняя часть первой буквы в этих двух подходах немного отличается.
Есть ли способ сделать то, что делает первый пример, с помощью гибкого поля? вместо этого, чтобы я мог располагать вещи по центру по вертикали одинакового характера? Сейчас они немного отличаются, если вы внимательно сравните их. Если нет, то как мне устранить эти различия в выравнивании?

Код: Выделить всё

.example-a {
display: inline-block;
padding-bottom: 24px;

}

.example-a img {
vertical-align: middle;
}

img {
height: auto;
width: 42px;
}

.example-b {
display: flex;
align-items: center;
gap: 4px;
}

Код: Выделить всё

[img]https://github.githubassets.com/assets/starstruck-default--light-a594e2a027e0.png[/img]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et molestie nulla. Ut ut augue id mi porttitor scelerisque.

[img]https://github.githubassets.com/assets/starstruck-default--light-a594e2a027e0.png[/img]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et molestie nulla. Ut ut augue id mi porttitor scelerisque.

Подробнее здесь: https://stackoverflow.com/questions/785 ... line-block