This post is written for my future self. I seem to come back to this issue a lot. This post is a collection of techniques I’ve found and sometimes used.
Image + Text on a signature line
An image followed by text always places the text aligned with the bottom of the image. Take this simple example of a byline that includes a photograph of the author.
Katie, my wonderful dog
Using the veritical-align: middle property:
<img style="vertical-align: middle:" src="http://my-image.jpg"> Katie, my wonderful dog 1l| 0O Katie, my wonderful dog
The problem is when the text next to the photo is too long to fit in the width of the container and will wrap to the next line.
Katie, my wonderful dog, whom I adopted from the SPCA, is very loyal and affectionate. She is an office dog!
Wrapping the line in a <div> and using Flexbox is easy.
<div style="display: flex; align-items: center">
<img src="http://jonericson.co/wp-content/uploads/software/sample-photo.jpg">
<p>Katie, my wonderful dog, whom I adopted from the SPCA, is very loyal and affectionate. She is an office dog!</p>
</div>Katie, my wonderful dog, whom I adopted from the SPCA, is very loyal and affectionate. She is an office dog!