Vertically align text with image using CSS

When working with web design, some times it might be desirable to maintain an even proportion, be it layout or be it placement of elements in the page. In such a context, it would be helpful to vertically align text. So here’s a neat trick to vertically align text with image using CSS.

Example to Vertically align text with image using CSS

Let’s assume that we have a div and it contains an image and some text. We would now like to vertically align the text with this image. We can do this in the following way:

<div>
<img style="width:50px;height:300px;vertical-align:middle;">
<span style="text">Hello World!</span>
</div>

Try Demo

Your Turn!

Do you know of any other ways to use CSS to vertically align text with image? Feel free to share by commenting below.