DONT ADD ANYTHING HERE!

  1. The vertical-align CSS property sets vertical alignment of an
    1. inline
    2. inline-block
    3. table-cell box
  2. The vertical-align property can be used in two contexts
    1. To vertically align an inline-level element's box inside its containing line box
      For example, it could be used to vertically position an image in a line of text
    2. To vertically align the content of a cell in a table
  3. Note that vertical-align only applies to the following elements:
    1. inline
    2. inline-block
    3. table-cell
    You can't use it to vertically align block-level elements

Parent-relative values

  1. baseline
    Aligns the baseline of the element with the baseline of its parent
  2. sub
    Aligns the baseline of the element with the subscript-baseline of its parent
  3. super
    Aligns the baseline of the element with the superscript-baseline of its parent
  4. text-top
    Aligns the top of the element with the top of the parent element's font
  5. text-bottom
    Aligns the bottom of the element with the bottom of the parent element's font
  6. middle
    Aligns the middle of the element with the baseline plus half the x-height of the parent
  7. length
    1. Aligns the baseline of the element to the given length above the baseline of its parent
    2. A negative value is allowed
  8. percentage
    1. Aligns the baseline of the element to the given percentage above the baseline of its parent, with the value being a percentage of the line-height property
    2. A negative value is allowed

Line-relative values

  1. top
    Aligns the top of the element and its descendants with the top of the entire line
  2. bottom
    Aligns the bottom of the element and its descendants with the bottom of the entire line

Values for table cells

  1. baseline (and sub, super, text-top, text-bottom, length, and percentage)
    Aligns the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned
  2. top
    Aligns the top padding edge of the cell with the top of the row.
  3. middle
    Centers the padding box of the cell within the row
  4. bottom
    Aligns the bottom padding edge of the cell with the bottom of the row

Example

baselineblue square
top
bottomblue square
text-top blue square
text-bottom blue square
html 
    <div class="valign">
        <div class="boxed">
            baseline<img class="alignbaseline" src="../images/myBlueRectange100_25.png" alt="">
        </div>
        <div class="boxed">
            top<img class="aligntop" src="../images/myBlueRectange100_25.png" alt="">
        </div>
        <div class="boxed">
            bottom<img class="alignbottom" src="../images/myBlueRectange100_25.png" alt="">
        </div>
        <div class="boxed">
            text-top <img class="aligntexttop" src="../images/myBlueRectange100_25.png" alt="">
        </div>
        <div class="boxed">
            text-bottom <img class="aligntextbottom" src="../images/myBlueRectange100_25.png"
                alt="">
        </div>
    </div>
css 
    .alignbaseline {
        vertical-align: baseline;
    }

    .aligntop {
        vertical-align: top;
    }

    .alignbottom {
        vertical-align: bottom;
    }

    .aligntexttop {
        vertical-align: text-top;
    }

    .aligntextbottom {
        vertical-align: text-bottom;
    }

    .valign {
        font-size: 5em;
    }

    .boxed {
        border: 1px solid gray;
    }

References

MDN: vertical-align