Vertical-Align: A Full Explanation
- by Livvy Jeffs
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?
What html elements respond to vertical-align?
Which html elements have default vertical-align attributes?
Which html elements have non-overridable vertical-align attributes?
And any clues as to understanding the idiosyncracies would help as well!
Thanks in advance!
