I've been struggling with vertical alignments, a seemingly simple enough process that has a lot of idiosyncrasies throughout different languages and element types. I've done a lot of reading through stackexchange and can't seem to find a common thread of understanding.

Here are the rules that I have been able to gather:

1) Vertical-align does not work in <\div>s, you have to set div {display: table-cell; vertical-align: middle}

This seems like a big hassle, especially since table-cells override the height limitation even when overflow is set to hidden and expands to fit content, which means the vertical "center" is variable.

I just read some source-code from Pinterest where button {vertical-align: middle}, but no other vertical-align commands seem to work. It seems as if button is by default aligned in the middle.

Can someone provide a clear explanation for the vertical-align attribute?