I am trying to vertically center align an image with text using inline-block. I am doing this because I want the icon to always wrap with the first line of text as the text wraps to a new line as opposed to to it center aligning with the whole block.
The problem I'm running into is that when everything is on a single line, vertical-align: middle doesn't seem to vertically center images in the same fashion that display: flex and align-items: center does. As a result this ends up with things looking inconsistent when I need to interchange between the two. I've attached screenshots, as you can see the top of the first letter is slightly different between the two approaches.
Is there a way to do what the first example is doing with flex box instead so I can have things vertically center in the same nature? Right now they are slightly off if you compare the two closely. If not, how do I reconcile these differences in the alignment?
.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;}<div class="example-a"><img src="https://github.githubassets.com/assets/starstruck-default--light-a594e2a027e0.png"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et molestie nulla. Ut ut augue id mi porttitor scelerisque.</span></div><div class="example-b"><img src="https://github.githubassets.com/assets/starstruck-default--light-a594e2a027e0.png"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et molestie nulla. Ut ut augue id mi porttitor scelerisque.</span></div>