Наглядное пояснение значений CSS свойства vertical-align

Каждый кодер как минимум слышал о CSS свойстве vertical-align, которое имеет целый ряд значений. Читая описания этих значений, мне было не понятно, как в реальности эти значения влияют на html-элементы. Поэтому пришлось детально вникнуть в тему, а чтобы не забыть была сделана визуальная шпаргалка на javascrpt, которая наглядно поясняет действие каждого из значений vertical-align.