`vertical-align: middle` doesn't do what I expected
If I am in a table cell in a apply the CSS rule
vertical-align: middle; to that cell then all the text centers vertically in the cell.
I am vertically centered text!
However, if I apply this to another element it functions differently or not at all. For example:
I am not Vertically Centered, but I wish I was :(
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?
display: table-cell to your div.
I am not vertically centered, but I wish I was :(
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here