Simple … Very Simple DIV vertical alignment
OH MY DEAR !!
I have spent countless hours in the past trying to figure out how to vertically align the contents of a DIV element using CSS… I am a CSS noob of sorts. I know the syntax but I don't know all the hacks and tricks.
So here's how:
Why Does This Work?
Simple explanation is that vertical-align:middle only works for <td> elements. There's a whole inline element discussion I could get into but you don't give a shit.
Setting the inner div(s) to have a display:table-cell will make it so that vertical-align works since it will be treated as a table cell.
The reason you need an inner div is because you don't want the container div behaving like a table cell. That screws all sorts of crap up.