How to vertically align images Center/Middle in CSS?

Though we have "vertical-align" style available in css, it doesn't work as expected.

Reason:
In HTML, images are aligned based on their parent html element.

Solution:
Use a div or block level around the image and assign "vertical-align" value to that parent element/node.

Example:
<div style="border: 1px solid red; height: 100px; width: 100px; display: table-cell; vertical-align: middle; text-align: center;">
  <img src="http://img1.moneycontrol.com/images/top2010/cnbc_logo.jpgquot; style=quot;border: 1px solid red;"/>
 </div>