How to use vertically align : middle text, next to image using CSS?

You can vertically align: middle your text next to image by applying vertical-align: middle CSS on both the elements, something like this

<div>
   <img style="width:150px;height:100px; vertical-align:middle" 
src="http://webneel.com/wallpaper/sites/default/files/images/08-2013/10-india-independence-day-wallpaper.preview.jpg" />
   <span style="vertical-align:middle">Align vertically Middle.</span>
</div>

This will work for sure.

Another solution is to use remove vertical-align from <span> and place it in <img> only

<div>
   <img style="width:150px;height:100px; vertical-align:middle" 
src="http://webneel.com/wallpaper/sites/default/files/images/08-2013/10-india-independence-day-wallpaper.preview.jpg" />
   <span>Align vertically Middle.</span>
</div>

Both works, but mostly second option is preferred. 

You can align text horizontally next to image using flexbox also

Here is the demo code

div {
 display: flex;
 align-items: center;
}

HTML

<div>
   <img style="width:150px;height:100px" 
src="http://webneel.com/wallpaper/sites/default/files/images/08-2013/10-india-independence-day-wallpaper.preview.jpg" />
   <span>Align vertically Middle.</span>
</div>

It should work  as required, here is similar code fiddle