If I am in a table cell in a apply the CSS rule \[code\]vertical-align: middle;\[/code\] to that cell then all the text centers vertically in the cell.\[code\]<table> <tr> <td style="vertical-align: middle;"> I am vertically centered text! </td> </tr></table>\[/code\]However, if I apply this to another element it functions differently or not at all. For example:\[code\]<div style="width: 300px; height: 400px; vertical-align: middle;"> I am not vertically centered, but I wish I was 
</div>\[/code\]But then if I apply it to an image tag then it adjusts how the image is oriented with other inline elements.Here is a jsfiddle with examples of all these scenarios.My question is, how can I accomplish vertical center alignment within a simple DIV just like the way it behaves in a table cell?
</div>\[/code\]But then if I apply it to an image tag then it adjusts how the image is oriented with other inline elements.Here is a jsfiddle with examples of all these scenarios.My question is, how can I accomplish vertical center alignment within a simple DIV just like the way it behaves in a table cell?